js表格添加行与删除行的例子
js简单的表格添加行和删除行操作实例。
代码:
<html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //创建一个html元素 function $c(tagname){ return document.createElement(tagname); } // www.jbxue.com //文档加载完成后要执行的内容 $(document).ready(function(){ //绑定添加行按钮的单击事件 $("#addrow").bind("click",function(){ // 取得table var tab = $("#tab"); // 创建tr元素 var tr = $c("tr"); // 为table追加tr元素 tab.append(tr); // 创建td元素 var td1=$c("td"); // td元素的内容 td1.innerHTML="insert1"; // 为新追加的tr追加td元素 tr.appendChild(td1); var td2=$c("td"); td2.innerHTML="insert2"; tr.appendChild(td2); }); // 绑定删除行按钮的单击事件 $("#deleterow").bind("click",function(){ // 取得table的第一行 var tab = $("#tab tr:eq(0)"); // 删除此行 tab.remove(); }); }); (脚本学堂 www.jbxue.com) </script> </head> <body> <table border=‘1‘ id="tab"> <tr> <td>123</td> <td>456</td> </tr> </table> </br> <button id="addrow">添加行</button> <button id="deleterow">删除行</button> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。