构建HTML表格时为何所有列都被错误插入复选框？

代码存在3处问题导致复选框异常插入所有列：

• 列渲染逻辑没有互斥：内层循环遍历每一列时，会先执行普通单元格（含第4列链接）的渲染，之后无论当前列是不是第8列，都会执行复选框单元格的渲染，相当于每遍历1列就会额外多生成1个带复选框的单元格，最终所有列都出现复选框。
• 复选框选中属性写法错误：HTML规范中，复选框只要存在checked属性就会被选中，写checked="unchecked"、checked="false"都属于存在该属性，会默认勾选，未选中状态不需要写该属性。
• 索引计数容易错位：如果是按日常从1开始数的第8列，对应数组索引是7，写j===8会永远匹配不到目标列。

将内层循环的渲染逻辑改为互斥分支，不同列走对应渲染逻辑，避免顺序执行多生成单元格，同时修正复选框的checked属性写法：

function loadClientTasks(client) {
  google.script.run.withSuccessHandler(function(ar) {
    const div = document.getElementById('search-results');
    if (ar == 'No tasks were found') {
      div.innerHTML = "There are no tasks for this client yet!";
      return;
    }
    if (ar && ar.length != 0) {
      let 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 (let i = 0; i < ar.length; i++) {
        result += "<tr>";
        for (let j = 0; j < ar[i].length; j++) {
          // 目标复选框列：如果是从1开始数第8列，把下面的j===8改成j===7
          if (j === 8) {
            const checked = ar[i][j] === true ? "checked='checked'" : "";
            result += `<td><input type='checkbox' name='checkboxrow1' value='${ar[i][j]}' ${checked}/></td>`;
          }
          // 第4列（索引4，对应从1数第5列）渲染文件链接
          else if (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></td>";
          }
          // 其余普通列渲染文本
          else {
            result += "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";
          }
        }
        result += "</tr>";
      }
      result += "</tbody></table></div><br>";
      div.innerHTML = result;
      showAddTaskBtn();
    } else {
      div.innerHTML = "There are no tasks for this client.";
      return;
    }
  }).getClientTasks(client);
}

内容的提问来源于stack exchange，提问作者onit