Sample code for dynamically adding and deleting table rows using js_javascript skills

As shown below:

Copy the codeThe code is as follows:

//Dynamicly add rows
function addRow(){
var table = document.getElementById("tableID");
var newRow = table.insertRow(); //Create New row
var newCell1 = newRow.insertCell(); //Create a new cell
newCell.innerHTML = ""; //Contents in the cell
newCell.setAttribute("align","center "); //Set position
}

//Dynamicly delete rows
function deleteRow(){
var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
var styles = document.getElementById("tableID");
styles.deleteRow(rowIndex);
}

Product Name	Product Quantity < /td>	Product unit price
< select name="a"> Electronics Electrical appliances < ;/select>

<script><br>function addRow(){<br>//Add row</p> <p>var newTr = testTbl.insertRow();<br>//Add column<br>var newTd0 = newTr.insertCell();<br>var newTd1 = newTr.insertCell();<br>var newTd2 = newTr .insertCell();<br>var newTd3 = newTr.insertCell();<br>//Set column content and attributes</p> <p>newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;<br>newTd1.innerText = document.all("b").value; <br>newTd2.innerText = document.all("c").value;<br>newTd3.innerHTML= '<input type="button" name="del" value="Delete" onclick="del(this )">';<br>}<br>function del(o)<br>{<br>var t=document.getElementById('testTbl');<br>t.deleteRow(o.parentNode.parentNode. rowIndex)<br>}<br></script>