js简单的表格添加行和删除行操作示例
发布时间：2020-12-14 22:58:38 所属栏目：资源 来源：网络整理
导读：复制代码 代码如下: 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(
|
复制代码 代码如下: <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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |