Q:

HTML table, need a checkbox column

Eventually this list will be populated with hundreds of rows, coming from a database. How would I go about populating the last column of every row with checkboxes? And a master checkbox at the header, upon being clicked, will select every other checkbox?
<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>

A:

You would need some Javascript, something like:
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;
    });  
  }
});

It checks all inputs when you check the one in header.

