4

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>
J. Doe43
  • 207
  • 2
  • 6
  • 20

4 Answers4

4

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.

Félix
  • 1,685
  • 2
  • 11
  • 6
  • Thanks! How about when I click on the master checkbox again, it unselects all checkboxes? – J. Doe43 Jun 02 '17 at 22:22
  • Well. If you want to use the master checkbox to check & uncheck, you need to test when you can do those actions. Whenever you check the master, check it all the slaves. I you uncheck a slave, uncheck the master, that is, the master is only checked if all slaves are. So you can only uncheck master if all slaves are checked. – Félix Jun 04 '17 at 00:15
1

You should use Javascript, see this question: How to implement "select all" check box in HTML? You most probably have to add the other check boxes manually to make it sign the row. However answering your question, you don't have to add at all the second columns.

Just keep the following:

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

Then in Notepad++ (for example) replace in the whole document: </tr> with <td><input type="checkbox" name="name5" /></td></tr>. This way you add easily the second column to all the rows, however you still have to modify them (name for example or it depends on what method you used) to sign the required row.

Stefan
  • 192
  • 1
  • 11
0

If you build out your table without the third column, you can append the third and input to every row with:

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

https://jsfiddle.net/ezbxsxnz/

Kurt
  • 1,868
  • 3
  • 21
  • 42
0

What is the programming language used for the backend? For example, if you are using Python you can render the html template by using jinja2 language.

For example:

<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 %}
René Höhle
  • 26,716
  • 22
  • 73
  • 82
Vlad Manicescu
  • 1