logo标签列表

HTML表格，需要一个复选框列。

htmlcheckbox
4

最终这个列表将从数据库中填充数百行。我该如何在每一行的最后一列中添加复选框？并且在标题处点击主复选框后，将选择所有其他复选框？

<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个回答
4
您需要一些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;
    });  
  }
});

当您勾选标题中的输入框时，它会检查所有输入框。

谢谢！如果我再次单击主复选框，它会取消选择所有复选框吗？ - J. Doe43
好的。如果您想使用主复选框来进行选择和取消选择操作，就需要测试何时可以执行这些操作。每当您勾选主复选框时，请勾选所有从属复选框。如果您取消勾选从属复选框，请取消勾选主复选框，也就是说只有在所有从属复选框都被勾选时，主复选框才会被勾选。因此，只有在所有从属复选框都被勾选时，才能取消勾选主复选框。 - Félix
1
你应该使用JavaScript，参见这个问题：如何在HTML中实现“全选”复选框？ 你很可能需要手动添加其他复选框来使其对行进行标记。但是回答你的问题，你根本不需要添加第二列。

只需保留以下内容：

<tr class="odd gradeX">
<td>1</td>
<td>Ambient Temperature</td>
</tr>

然后在Notepad++（例如）中替换整个文档中的以下内容：</tr> 为 <td><input type="checkbox" name="name5" /></td></tr>。这样，您可以轻松地将第二列添加到所有行中，但是您仍然需要修改它们（例如名称或它取决于您使用的方法）以标记所需的行。
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 %}
0
如果您在不使用第三列的情况下构建表格，可以通过以下方式将第三个输入框添加到每一行： $("tbody>tr").append("<input type='checkbox' />");

https://jsfiddle.net/ezbxsxnz/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接