Table check-all
check/uncheck all rows using one checkbox.
HTML
<input type="button" value="Add Row" onclick="addRow ('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow ('dataTable')" />
<table id="dataTable" >
<tr>
<th>
<input type="checkbox" onchange="checkAll ('dataTable')" name="chk[]" />
</th>
<th>Make</th>
<th>Model</th>
<th>Description</th>
<th>Start Year</th>
<th>End Year</th>
</tr>
</table>
<input type="button" value="Add Row" onclick="addRow ('dataTable2')" />
<input type="button" value="Delete Row" onclick="deleteRow ('dataTable2')" />
<table id="dataTable2" >
<tr>
<th>
<input type="checkbox" onchange="checkAll ('dataTable2')" name="chk[]" />
</th>
<th>Make</th>
<th>Model</th>
<th>Description</th>
<th>Start Year</th>
<th>End Year</th>
</tr>
</table>
JavaScript
function addRow (tableID)
{
var table = document.getElementById (tableID);
var row = table.insertRow (-1);
var element1 = document.createElement ("input");
element1.type = "checkbox";
element1.name = "chkbox[]";
row.insertCell(0).appendChild (element1);
for (var i = 1; i < 6; i++)
{
var cell = row.insertCell (i);
cell.innerHTML = table.rows.length - 1;
}
}
function deleteRow (tableID)
{
var table = document.getElementById (tableID);
for (var i = 1; i < table.rows.length; i++)
{
var row = table.rows[i];
var chkbox = row.cells[0].children[0];
if (chkbox && chkbox.checked) table.deleteRow (i--);
}
if (table.rows.length == 1) table.rows[0].cells[0].children[0].checked = false;
}
function checkAll (tableID)
{
var table = document.getElementById (tableID);
var val = table.rows[0].cells[0].children[0].checked;
for (var i = 1; i < table.rows.length; i++)
{
table.rows[i].cells[0].children[0].checked = val;
}
}