JSFiddle - React, Tailwind, and code Playground

by Prakash Upadhyay

HTML

<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td>Row 1</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
   <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
   <td>Row 3</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>
<br>
<input type="button" onclick="insRow()" value="Insert row">

JavaScript

function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}

function insRow(){
	var x=document.getElementById('myTable').insertRow(-1);
	var y=x.insertCell(0);
	var z=x.insertCell(1);
	var d=x.insertCell(2);
	y.innerHTML="NEW CELL1";
	z.innerHTML="NEW CELL2";
	d.innerHTML="<input type='button' value='Delete' onclick='deleteRow(this)'>";
}