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表格，需要複選框列

回答

相關問題