最终，此列表将填充数百个来自数据库的行。我如何用复选框填充每一行的最后一列？标题上的主复选框在被点击时会选中所有其他复选框吗？
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>IO</th>
<th>Signals</th>
<th><input name="select_all" value="1" type="checkbox"></th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>1</td>
<td>Ambient Temperature</td>
<td><input type="checkbox" name="name1" /></td>
</tr>
<tr class="odd gradeX">
<td>2</td>
<td>Analog Input 1</td>
<td><input type="checkbox" name="name2" /></td>
</tr>
<tr class="odd gradeX">
<td>3</td>
<td>Analog Input 2</td>
<td><input type="checkbox" name="name3" /></td>
</tr>
<tr class="odd gradeX">
<td>4</td>
<td>Backup Battery</td>
<td><input type="checkbox" name="name4" /></td>
</tr>
<tr class="odd gradeX">
<td>5</td>
<td>Main Power</td>
<td><input type="checkbox" name="name5" /></td>
</tr>
<tr class="odd gradeX">
<td>6</td>
<td>Signal Strength</td>
<td><input type="checkbox" name="name6" /></td>
</tr>
<tr class="odd gradeX">
<td>7</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name7" /></td>
</tr>
<tr class="odd gradeX">
<td>8</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name8" /></td>
</tr>
<tr class="odd gradeX">
<td>9</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name9" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name10" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name11" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name12" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name13" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name14" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name15" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name16" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name17" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name18" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name19" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name20" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name21" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name22" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name23" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name24" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name25" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name26" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name27" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name28" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name29" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name30" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name31" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name32" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name33" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name34" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name35" /></td>
</tr>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td><input type="checkbox" name="name36" /></td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：2)
您需要一些Javascript，例如：
var dataTable = document.getElementById('data-table');
var checkItAll = dataTable.querySelector('input[name="select_all"]');
var inputs = dataTable.querySelectorAll('tbody>tr>td>input');
checkItAll.addEventListener('change', function() {
if (checkItAll.checked) {
inputs.forEach(function(input) {
input.checked = true;
});
}
});
当您检查标题中的那个时，它会检查所有输入。
答案 1 :(得分：1)
您应该使用Javascript，请参阅此问题：How to implement "select all" check box in HTML?您最有可能必须手动添加其他复选框以使其对该行进行签名。无论如何回答您的问题，您都不必添加第二列。
请保留以下内容：
<tr class="odd gradeX">
<td>1</td>
<td>Ambient Temperature</td>
</tr>
然后在Notepad ++中（例如）替换整个文档：
</tr> <td><input type="checkbox" name="name5" /></td></tr> async/await。这样，您可以轻松地将第二列添加到所有行，但是您仍然需要修改它们（例如名称或者它取决于您使用的方法）来签署所需的行。
答案 2 :(得分：0)
如果你在没有第三列的情况下构建你的表，你可以将第三列和输入附加到每一行：
$("tbody>tr").append("<input type='checkbox' />");
答案 3 :(得分：0)
后端使用的编程语言是什么？例如，如果您使用 Python，则可以使用 jinja2 语言呈现 html 模板。
例如：
<div class="wrapper">
<table class="table table-dark">
<tr>
<th> Surname </th>
<th> Name </th>
<th> Assigned Proffessor </th>
<th> Group</th>
</tr>
{% for item in labels %}
<tr>
<td>{{ item[0] }}</td>
<td>{{ item[1] }}</td>
<td>{{ item[2] }}</td>
<td>{{ item[3] }}</td>
</tr>
{% endfor %}