JSFiddle - React, Tailwind, and code Playground

by panvourtsis

HTML

<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
</head>

<body id="body">


<table align="center" cellspacing=1 cellpadding=1 id="data-table" border=1 class="data-table">
<thead>

<tr id="head" class="head">
    <th class="head">Name</th>
    <th class="head">Action</th>
</tr>

<tr id="initial-row" class="initial-row">
    <th><input type="text" id="text-field"></th>
    <th><input type="button" class="add-button" id="add-button" value="Add"></th>
</tr>

</thead>

<tbody>

</tbody>

</table>

<a id="delete-link" href="#"> Delete all rows Except the first two</a>

<script src="myscript.js"></script>
</body>
</html>

JavaScript

addButton=document.getElementById("add-button");
table=document.getElementById("data-table");

addButton.addEventListener('click',add,false);

function add()
{

    var tableLength=table.length;
    var row = table.getElementsByTagName('tbody')[0].insertRow(tableLength);

    var col1 = row.insertCell(0);
    var col2 = row.insertCell(1);

    col1.innerHTML="col1";
    col2.innerHTML="col2";
}

var delLink = document.getElementById("delete-link");
delLink.addEventListener('click',del,false);

function del()
{
    var rowstoDelete = table.querySelectorAll("tbody tr");
    [].slice.call(rowstoDelete).forEach(function(row) {
    row.remove()
    });

}