HTML表，需要复选框列
HTML表，需要复选框列
提问于 2017-06-02 21:35:07
最终，这个列表将被来自数据库的数百行填充。如何使用复选框填充每行的最后一列？在标题处的主复选框，在被单击时，会选择每个其他复选框吗？
<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>回答 4
Stack Overflow用户
回答已采纳
发布于 2017-06-02 22:01:36
您需要一些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;
});
}
});当您检查标题中的输入时，它会检查所有输入。
Stack Overflow用户
发布于 2017-06-02 21:59:44
您应该使用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>。通过这种方式，您可以轻松地将第二列添加到所有行中，但是仍然需要修改它们(例如名称，或者取决于您使用的方法)来对所需的行进行签名。
Stack Overflow用户
发布于 2017-06-02 22:00:45
如果在没有第三列的情况下构建表，则可以将第三列附加到第三列，并在每一行中输入以下内容：
$("tbody>tr").append("<input type='checkbox' />");
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44337741
复制相关文章
相似问题
腾讯云开发者
