function insertRow() {
var table = document.querySelector("#myTable");
// without parameters, insert at the end,
// otherwise parameter = index where the row will be inserted
var row = table.insertRow();
row.innerHTML = "<td>New</td><td>New</td><td>New</td>"
/*
var cell1 = row.insertCell();
cell1.innerHTML = "<b>New cell1</b>";
var cell2 = row.insertCell();
cell2.innerHTML = "New cell2";
var cell3 = row.insertCell();
cell3.innerHTML = "New cell3";
*/
}
function deleteFirstRow() {
var table = document.querySelector("#myTable");
table.deleteRow(1); // 0 is the header
}
JS.HTML.CSS.Live coding video: dynamic table.EX1
------------------------------------------------
A [Pen](https://codepen.io/Onlyforbopi/pen/zJgyNe) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).
[License](https://codepen.io/Onlyforbopi/pen/zJgyNe/license).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A typical HTML table with simple styling</title>
</head>
<body>
<table id="myTable">
<caption>A typical HTML table</caption>
<tr>
<th scope="col">Given Name</th>
<th scope="col">Family Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Michel</td>
<td>Buffa</td>
<td>52</td>
</tr>
<tr>
<td>Dark</td>
<td>Vador</td>
<td>Unknown</td>
</tr>
<tr>
<td>Luke</td>
<td>Skywalker</td>
<td>Unknown</td>
</tr>
</table>
<p>Click to add a new row</p>
<button onclick="insertRow();">Add a new row</button>
<p>Click to delete the first row of the table</p>
<button onclick="deleteFirstRow();">Delete first row</button>
</body>
</html>