源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js简单的表格添加行和删除行操作示例

  • 时间:2021-05-13 23:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js简单的表格添加行和删除行操作示例
[u]复制代码[/u] 代码如下:
<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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部