JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" cellPadding="5" cellSpacing="0" border="1" rules="all">
<tr>
<th>
<input type="checkbox" onchange="checkAll()" name="chk[]" />
</th>
<th>Make</th>
<th>Model</th>
<th>Description</th>
<th>Start Year</th>
<th>End Year</th>
</tr>
</table>
CSS
body {
font: 14px/18px Arial;
padding: 30px 20px;
background: gray;
}
table#dataTable {
margin-top: 10px;
color: white;
}
JavaScript
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
cell3.innerHTML = rowCount;
var cell4 = row.insertCell(3);
cell4.innerHTML = rowCount;
var cell5 = row.insertCell(4);
cell5.innerHTML = rowCount;
var cell6 = row.insertCell(5);
cell6.innerHTML = rowCount;
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 1; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].children[0];
if (chkbox != null && chkbox.checked == true) {
table.deleteRow(i);
rowCount--;
i--;
}
}
var rootChkbox = table.rows[0].cells[0].children[0];
if (rowCount == 1) rootChkbox.checked = false;
}
function checkAll() {
var checkboxes = document.getElementsByTagName('input');
var val = null;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
if (val === null) val = checkboxes[i].checked;
checkboxes[i].checked = val;
}
}
}