您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
js简单的表格添加行和删除行操作示例
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了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); } //文档加载完成后要执行的内容 $(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(); }); }); </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>- 上一个程序编程： jquery控制display属性为none或block
- 下一个程序编程： JS 获取浏览器和屏幕宽高等信息代码
