使用 JavaScript 在表格上创建复选框

Posted 2023-03-05

【中文标题】使用 JavaScript 在表格上创建复选框

【英文标题】：Create Checkbox on table with JavaScript

【发布时间】：2022-01-08 00:47:59

【问题描述】：

我正在构建一个应用程序，在这个应用程序上我必须在表格上添加项目，我想在我添加的每一行上添加一个复选框，但我在尝试这样做时遇到了麻烦。 你知道如何在我添加到表格的每一行上添加一个复选框吗？

下面是我在表格中添加每行的代码

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>");

但这只是在我的表格中添加了一个文本，而不是复选框本身。

<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 代码。

提前致谢！

【问题讨论】：

像创建其他单元格一样在循环中创建单元格。然后，使用insertAdjacentHTML 代替append 来添加按钮的HTML。请注意，这必须在 设置 innerHTML 之后完成，否则所述属性会覆盖单元格中的所有内容。

非常感谢！那是我在nl.appendChild(tr); 之前添加的代码tr.insertAdjacentHTML('beforeEnd', "<td> <div class='form-control'>\ <input id = 'deleteChck' type='checkbox' /> \ <label for='chk'/>Delete</div>\ </td>"); 谢谢！

【参考方案1】：

正如 Teemu 在 cmets 中所说，解决方案是 “像创建其他单元格一样在循环中创建单元格。然后，使用 insertAdjacentHTML 代替追加，使用 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);
  )

它有效