使用JavaScript向表格动态新增行添加checkbox复选框问题求助

问题原因 #

你使用原生DOM的append()方法传入HTML字符串时，该方法只会把内容当成纯文本节点插入，不会解析为HTML元素，因此只会显示原始标签文本，无法渲染出复选框。
另外你原代码末尾的nl.appendChild(tr)属于冗余操作，insertRow()方法已经自动将创建的行插入到tbody中，无需额外追加。

解决方案 #

步骤1：调整HTML表头，新增复选框对应列

在表头最前方新增选择列，和后续插入的复选框列对应：

<div id="table-wrapper" class="table-responsive">
      <table class="table table-hover" id="PartData">
           <thead>
               <tr>
                   <th scope="col">选择</th>
                   <th scope="col">#</th>
                   <th scope="col">FUNÇÃO</th>
                   <th scope="col">DESCRIÇÃO</th>
                   <th scope="col">QUANTIDADE</th>
                   <th scope="col">FABRICANTE DO PAINEL</th>
                   <th scope="col">PEÇA</th>
                   <th scope="col">REVISÃO</th>
               </tr>
           </thead>
           <tbody>
           </tbody>
       </table>
   </div>

如果你不需要额外加表头列，想把复选框放在原有最后一列之后，跳过这一步即可，后面JS代码做对应调整就行。

步骤2：修改JS插入逻辑

通过insertCell()先插入复选框列，再插入原有数据：

function addDataToTbody(nl, data) { // nl -> tbody元素，data -> 对象数组
  // 清空原有tbody内容，避免重复渲染
  nl.innerHTML = '';
  data.forEach((d, i) => {
    var tr = nl.insertRow(i);
    // 插入复选框单元格
    var checkCell = tr.insertCell(0);
    // 为每个复选框生成唯一id，保证label点击可以选中对应复选框
    const uniqueCheckId = `part_check_${i}`;
    checkCell.innerHTML = `
      <div class='form-control'>
        <input type='checkbox' id="${uniqueCheckId}" />
        <label for="${uniqueCheckId}">选择</label>
      </div>
    `;
    // 插入原有数据单元格，列索引从1开始，第0列是复选框
    Object.keys(d).forEach((k, j) => {
      var cell = tr.insertCell(j + 1);
      cell.innerHTML = d[k];
    });
  })
}

如果要把复选框放在最后一列，只需要把插入复选框的逻辑放到遍历数据的代码之后，将insertCell(0)改为insertCell(Object.keys(d).length)即可，不需要调整表头。

调用示例

// 获取tbody元素
const partTbody = document.querySelector('#PartData tbody');
// 测试数据
const testData = [
  {id: '1', func: '测试功能', desc: '测试描述', num: 10, manufacturer: '测试厂商', part: '测试零件', revision: 'V1.0'}
];
// 调用方法插入数据
addDataToTbody(partTbody, testData);

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