HTML表格，需要复选框列

最终，这个列表将填充来自数据库的数百行。我将如何使用复选框填充每一行的最后一列？在标题上的主复选框被点击后，会选择其他复选框？HTML表格，需要复选框列

<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>

来源

2017-06-02 J. Doe43

你会需要一些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; 
    }); 
    } 
});

它检查所有输入时，你检查标题中的一个。

来源

2017-06-02 22:01:36

谢谢！当我再次点击主复选框时，它会取消选中所有复选框？ –

好吧。如果您想使用主复选框来选中并取消选中，则需要测试何时可以执行这些操作。每当你检查主人时，检查它的所有奴隶。我取消了一个奴隶，取消了主人的检查，也就是说，如果所有的奴隶都是，主人只会被检查。所以，如果所有的奴隶都被选中，你只能取消选中主人。 –

我做了一个Codepen：https://codepen.io/felixhorro/pen/wevxVw –

你应该使用JavaScript，看到了这个问题：How to implement "select all" check box in HTML?你很可能需要手动添加其他复选框，使其签署一行。不过，回答你的问题，你不必在第二栏添加任何内容。

只要保持如下：

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

然后在记事本++（例如）在整个文档中替换： </tr>与<td><input type="checkbox" name="name5" /></td></tr>。通过这种方式，您可以轻松地将第二列添加到所有行，但是您仍然需要修改它们（例如名称或取决于您使用的方法）以在所需的行上进行签名。

来源

2017-06-02 21:59:44 Stefan

如果你建立你的表，而第三列，可以追加第三和输入到每一行有：

$("tbody>tr").append("<input type='checkbox' />");

https://jsfiddle.net/ezbxsxnz/

来源

2017-06-02 22:00:45 Kurt

HTML表格，需要复选框列

回答

相关问题