HTMLテーブル。チェックボックス列が必要

Question

最終的に、このリストにはデータベースからの何百もの行が取り込まれます。すべての行の最後の列にチェックボックスを挿入するにはどうすればよいでしょうか？ヘッダーのマスターチェックボックスをクリックすると、他のチェックボックスが1つおきに選択されますか？

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

Answer 1

：

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; 
    }); 
    } 
}); 

ヘッダーにある入力をすべてチェックします。

Answer 2

あなたはJavascriptを使用する必要があり、この質問を参照してください。How to implement "select all" check box in HTML?あなたはおそらく、それが行に署名するために、手動で他のチェックボックスを追加する必要があります。あなたの質問に答えても、すべての2番目の列を追加する必要はありません。

ただ、次の点をご確認ください。

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

次に、メモ帳で++（例えば）文書全体で置き換えます<td><input type="checkbox" name="name5" /></td></tr>と </tr>を。このようにして、2番目の列をすべての行に簡単に追加できますが、必要な行に署名するためにそれらを変更する必要があります（たとえば、名前や使用方法によって異なります）。

Answer 3

あなたは3列目なしで、あなたのテーブルを構築する場合は、あなたと第三、すべての行への入力を追加することができます：あなたは、いくつかのJavascript、のようなものが必要になり

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

https://jsfiddle.net/ezbxsxnz/