Home > Web Front-end > JS Tutorial > Sample code for dynamically adding and deleting table rows using js_javascript skills

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

WBOY
Release: 2016-05-16 17:09:04
Original
828 people have browsed it

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">


< ;/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>


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template