SoFunction
Updated on 2025-04-10

Sample code to dynamically add and delete table lines using js


// Dynamically add rows
function addRow(){
   var table = ("tableID");
var newRow = (); //Create a new line
var newCell1 = (); //Create a new cell
= ""; // Contents in the cell
("align","center"); //Set the location
}

//Dynamic delete rows
function deleteRow(){
   var rowIndex = ;
   var styles = ("tableID");
   (rowIndex);
}

<html>
<head>
<title></title>
</head>
<body>
<table border=1>
<tr>
<td>
Product Name
</td>
<td>
Product quantity
</td>
<td>
Product unit price
</td>
</tr>
<tr>
<td>
<select name="a">
<option value="electron">electronic</option>
<option value="Electrical Appliances">Electrical Appliances</option>
</select></td>
<td>
    <input type="text" name="b">
     </td>
<td>
    <input type="text" name="c">
     </td>
</td>
</table>
<input type="button" name="Submit2" value="Add" onclick="addRow()">
<script>
function addRow(){
//Add row

var newTr = ();
//Add column
var newTd0 = ();
var newTd1 = ();
var newTd2 = ();
var newTd3 = ();
//Set column content and properties

= ("a").options[("a").selectedIndex].text;
= ("b").value;
= ("c").value;
= '<input type="button" name="del" value="delete" onclick="del(this)">';
}
function del(o)
{
var   t=('testTbl');
()
}
</script>
</body>
</html>