为什么在构建此 HTML 表格时会在所有列中插入复选框？

Question

我有一个二维数组，它的第 8 列带有 true 或 false，这应该有助于显示表中的复选框是否已选中。

下面的脚本是在所有列和行中插入一个复选框，但我将其限制在第 8 列，我不知道缺陷在哪里：

function loadClientTasks(client) {
  google.script.run.withSuccessHandler(function(ar) {
    if (ar == 'No tasks were found') {
      var div = document.getElementById('search-results');
      div.innerHTML = "There are no tasks for this client yet!";
      return;
    }
    var checkBox = "<td><input type='checkbox' name='checkboxrow1'>"
    if (ar && ar !== undefined && ar.length != 0) {
      var result = "<div class='card'><table class='table table-borderless table-hover' id='dtable'>" +
        "<thead style='white-space: nowrap'>" +
        "<tr>" + //Change table headings to match witht he Google Sheet
        "<th style='width: 4%' class='text-center'>Client ID</th>" +
        "<th style='width: 4%' class='text-center'>Task No</th>" +
        "<th style='width: 25%' class='text-center'>Task</th>" +
        "<th style='width: 4%' class='text-center'>Date Assigned</th>" +
        "<th style='width: 3%' class='text-center'>Link To File</th>" +
        "<th style='width: 17%' class='text-center'>Notes</th>" +
        "<th style='width: 12%' class='text-center'>Approval</th>" +
        "<th style='width: 24%' class='text-center'>Comments</th>" +
        "<th style='width: 24%' class='text-center'>Request Approval</th>" +
        "</tr>" +
        "</thead>" +
        "<tbody>";
      for (var i = 0; i < ar.length; i++) {
        result += "<tr>";
        for (var j = 0; j < ar[i].length; j++) { //Checks if Link columns has data and pushes it as a link into the table
          j === 4 && ar[i][j] != '' ? result += "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'><a href='" + ar[i][j] + "' target='_blank'>Link</a>" :
            result += "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";

          j === 8 && ar[i][j] == true ? result += "<td><input type='checkbox' name='checkboxrow1' value=" + ar[i][j] + " checked='checked'/></td>" : result += "<td><input type='checkbox' name='checkboxrow1' value='false' checked='unchecked'/></td>" //This is where I think is not right.
        }
        result += "</tr>";
      }
      result += "</tbody></table></div><br>";
      var div = document.getElementById('search-results');
      div.innerHTML = result;
      showAddTaskBtn();
    } else {
      var div = document.getElementById('search-results');
      div.innerHTML = "There are no tasks for this client.";
      return;
    }
  }).getClientTasks(client);
}

Answer 1

尝试这样循环：

for (var i = 0; i < ar.length; i++) {
  result += "<tr>";
  for (var j = 0; j < ar[i].length; j++) {
    result += (j === 4 && ar[i][j] != '') ? "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'><a href='" + ar[i][j] + "' target='_blank'>Link</a>" : "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";
    result += (j === 8 && ar[i][j] == true) ? "<td><input type='checkbox' name='checkboxrow1' value=" + ar[i][j] + " checked='checked'/></td>" : "<td><input type='checkbox' name='checkboxrow1' value='false' checked='unchecked'/></td>";
  }
  result += "</tr>";
}

我还没有测试过这个：

function loadClientTasks(client) {
  google.script.run.withSuccessHandler(function(ar) {
    if (ar == 'No tasks were found') {
      var div = document.getElementById('search-results');
      div.innerHTML = "There are no tasks for this client yet!";
      return;
    }
    if (ar && ar.length) {
      var result = "<div class='card'><table class='table table-borderless table-hover' id='dtable'>" +
        "<thead style='white-space: nowrap'>" + "<tr>" + "<th style='width: 4%' class='text-center'>Client ID</th>" + "<th style='width: 4%' class='text-center'>Task No</th>" + "<th style='width: 25%' class='text-center'>Task</th>" + "<th style='width: 4%' class='text-center'>Date Assigned</th>" + "<th style='width: 3%' class='text-center'>Link To File</th>" + "<th style='width: 17%' class='text-center'>Notes</th>" + "<th style='width: 12%' class='text-center'>Approval</th>" + "<th style='width: 24%' class='text-center'>Comments</th>" + "<th style='width: 24%' class='text-center'>Request Approval</th>" + "</tr>" + "</thead>" + "<tbody>";
      for (var i = 0; i < ar.length; i++) {
        result += "<tr>";
        for (var j = 0; j < ar[i].length; j++) { 
          result += (j === 4 && ar[i][j] != '') ?  "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'><a href='" + ar[i][j] + "' target='_blank'>Link</a>" : "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";

         result += (j === 8 && ar[i][j] == true )? "<td><input type='checkbox' name='checkboxrow1' value=" + ar[i][j] + " checked='checked'/></td>" : "<td><input type='checkbox' name='checkboxrow1' value='false' checked='unchecked'/></td>" //This is where I think is not right.
        }
        result += "</tr>";
      }
      result += "</tbody></table></div><br>";
      var div = document.getElementById('search-results');
      div.innerHTML = result;
      showAddTaskBtn();//Presumably this is another client side function
    } else {
      var div = document.getElementById('search-results');
      div.innerHTML = "There are no tasks for this client.";
      return;
    }
  }).getClientTasks(client);
}