使用 JavaScript 在 table 上创建复选框

Question

我正在构建一个应用程序，在这个应用程序上我必须在 table 上添加项目，我想在我添加的每一行上添加一个复选框，但我在试图做到这一点。您知道如何在我添加到 table 的每一行上添加一个复选框吗？

下面是我在 table

中每行添加一行的代码

function addDataToTbody(nl, data) { // nl -> NodeList, data -> array with objects
  data.forEach((d, i) => {
    var tr = nl.insertRow(i);
    Object.keys(d).forEach((k, j) => { // Keys from object represent th.innerHTML
      var cell = tr.insertCell(j);
      cell.innerHTML = d[k]; // Assign object values to cells   
    });
    nl.appendChild(tr);
  })
}

我尝试做类似

的事情

tr.append("<td> <div class='form-control'>\
    <input type='checkbox' /> \
    <label for='chk'/>select</div>\
</td>");

但这只是向我的 table 添加了一个文本，而不是复选框本身。

<div id="table-wrapper" class="table-responsive">
      <table class="table table-hover" id="PartData">
           <thead>
               <tr>
                   <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>
               <tr>
               </tr>
           </tbody>
       </table>
   </div>

以上是我的 HTML 代码。

提前致谢！

Answer 1

正如 Teemu 在评论中所说，解决方案是 “像创建其他单元格一样在循环中创建单元格。然后，不要附加，而是使用 insertAdjacentHTML 为按钮添加 HTML。注意，这必须在之后完成设置 innerHTML，否则所说的属性会覆盖单元格中的所有内容。“

这就是我的最终功能：

function addDataToTbody(nl, data) { // nl -> NodeList, data -> array with objects
  data.forEach((d, i) => {
    var tr = nl.insertRow(i);
    
    //cell2.type = checkbox;
    Object.keys(d).forEach((k, j) => { // Keys from object represent th.innerHTML
      console.log(j)
      var cell = tr.insertCell(j);
      cell.innerHTML = d[k]; // Assign object values to cells   
    });
    
    tr.insertAdjacentHTML('beforeEnd', "<td> <div class='form-control'>\
    <input id = 'deleteChck' type='checkbox' /> \
    <label for='chk'/>Delete</div>\
    </td>");

    nl.appendChild(tr);
  })
}

而且有效

使用 JavaScript 在 table 上创建复选框

Create Checkbox on table with JavaScript

html

javascript

checkbox

html-table