js simple table add row and delete row operation example_javascript skills

Copy code The code is as follows:

< ;script src="http://code.jquery.com/jquery-1.11.0.min.js">
<script> <br>//Create an html element<br>function $c(tagname){ <br>return document.createElement(tagname); <br>} <br>//Content to be executed after the document is loaded <br>$(document).ready(function(){ <br>//Bind the click event of the add row button<br>$("#addrow").bind("click",function(){ <br>// Get table <br>var tab = $( "#tab"); <br>// Create tr element <br>var tr = $c("tr"); <br>// Append tr element to table <br>tab.append(tr); <br>//Create td element<br>var td1=$c("td"); <br>// Content of td element<br>td1.innerHTML="insert1"; <br>// For the newly added tr Append td element <br>tr.appendChild(td1); <br>var td2=$c("td"); <br>td2.innerHTML="insert2"; <br>tr.appendChild(td2); <br>}); <br>// Bind the click event of the delete row button<br>$("#deleterow").bind("click",function(){ <br>// Get the first row of the table <br>var tab = $("#tab tr:eq(0)"); <br>// Delete this line <br>tab.remove(); <br>}); <br>}); <br></script>

123

456

< button id="addrow">Add row
Delete row