如何在网页中设置动态复选框答案

【问题标题】：How can I set dynamic checkbox in web page如何在网页中设置动态复选框
【发布时间】：2019-11-17 08:33:23
【问题描述】：

当使用 java 脚本从模式中给出数据时，如何将动态复选框设置为表格行

function CreateCheckBox(){

    //Second create a&nbsp;row
    var row = document.tbody.tr;
    row.className = 'gridrow';

    //Third create td&nbsp;element
    td = document.tbody.tr.td;
    td.className = 'gridcell';

    td.rowSpan = 1;
    td.style.width = '80px';

    //fourth create checkbox in that td element
    var chkbox = document.createElement('input');
    chkbox.type = "checkbox";
    chkbox.id = "chk"&nbsp;
    chkbox.name = "chk"&nbsp;

    //Fifth add checkbox to td element
    td.appendChild(chkbox);
    //Add a td into a row
    row.appendChild(td);
    //Finally added to&nbsp;the form to print

}

<table
    id="example"
    class="form-table"
    class="display select"
    cellspacing="2"
    cellpadding="10">
  <thead>
    <tr>
      <th>CID</th>
      <th>Name</th>
      <th>Address</th>
      <th>TP</th>
    </tr>
  </thead>
  <tbody
    id="tableB"
    data-toggle="checkbox"
    onclick="CreateCheckBox()">
  </tbody>
</table>

但是当从网页中的模型输入数据时，我无法获得复选框。这是索引页中的表格。之后，我编写了用于在表中添加数据的 java 脚本

【问题讨论】：

如果<tbody ...为空，则无法点击
chkbox.id = "chk"&nbsp;; 是 JS 语法错误，否则 ID 必须是唯一的！
抱歉我的所有错误......如果你能帮助我解决它，我将不胜感激

标签： javascript html model-view-controller checkbox model

【解决方案1】：

每次您想使用例外参数添加任何行调用createCheckBox。希望它会起作用。

function createCheckBox(cid, name, address, tp) {
  var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + cid + "</td><td>" + name + "</td>	<td>" + address + "</td><td>" + tp + "</td></tr>";
  $(markup).appendTo("#example tbody");
}
createCheckBox(1, 'fafa', 'add', 'Tp1');
createCheckBox(2, 'fafa2', 'add2', 'Tp12');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example" class="form-table display select" cellspacing="2" cellpadding="10">
  <thead>
    <tr>
      <th>Checkbox</th>
      <th>CID</th>
      <th>Name</th>
      <th>Address</th>
      <th>TP</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

在脚本的最后，我用不同的值调用createCheckBox 两次。所以你可以注意到表格中有两行。

【讨论】：