首页 > 代码库 > 表格（table) 插件：支持当前行增行、删除。使用事件委托
表格（table) 插件：支持当前行增行、删除。使用事件委托
最近做一个项目，需要对表格进行增行和删行。
研究了一下jquery操作dom的方法和事件委托原理，下面是我编写的例子，源码传上，欢迎高手指点。
功能：
支持在指定行下面增行；
支持删行指定行；
增行、删行后自动计算序号；使用table背景设置表格边框；
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link href=http://www.mamicode.com/"" rel="stylesheet"> 10 <script src=http://www.mamicode.com/"http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script> 11 <style type="text/css"> 12 body{ 13 font-size: 16px; 14 } 15 a{ 16 text-decoration:none; 17 } 18 div.wrap{ 19 width:40%; 20 margin: auto; 21 } 22 table.list{ 23 background-color: black; 24 width:100%; 25 } 26 table.list td,table.list th{ 27 background-color: white; 28 width:20%; 29 line-height: 2em; 30 } 31 .hidden{ 32 display:none; 33 } 34 .center{ 35 text-align: center; 36 } 37 .orange{ 38 color:orange; 39 } 40 a:hover{ 41 color:blue; 42 font-weight: bold; 43 } 44 </style> 45 </head> 46 <body> 47 <div class="wrap"> 48 <div class="list"> 49 <h1 class="center">表格插件</h1> 50 <p class="orange">支持增行、删行</p> 51 <table class="list" > 52 <thead> 53 <tr> 54 <th>序号</th> 55 <th>姓名</th> 56 <th>成绩</th> 57 <th><a href=http://www.mamicode.com/"#" class="add">增行</a></th> 58 <th></th> 59 </tr> 60 </thead> 61 <tbody> 62 <tr class="trmodle hidden"> 63 <td class="center">1</td> 64 <td> 65 <select name="" id=""> 66 <option value=http://www.mamicode.com/"1">张三</option> 67 <option value=http://www.mamicode.com/"2">李四</option> 68 <option value=http://www.mamicode.com/"3">王五</option> 69 <option value=http://www.mamicode.com/"3">赵五</option> 70 </select> 71 </td> 72 <td><input type="text" value=http://www.mamicode.com/"100" /></td> 73 <td class="center"><a href=http://www.mamicode.com/"#" class="add">增行</a></td> 74 <td class="center"><a href=http://www.mamicode.com/"#" class="del">删行</a></td> 75 </tr> 76 </tbody> 77 </table> 78 </div> 79 </div> 80 </body> 81 <script type="text/javascript"> 82 $(function(){ 83 //使用事件委托：解决新增元素事件绑定问题 84 $("table.list").on("click",function(e){ 85 //console.log(e); 86 var v = e.target||srcElement; 87 if(v.nodeName.toLowerCase()=="a"){ 88 //增行 89 if(v.className=="add"){ 90 //复制模板行数据 91 var n = "<tr>"+$(".trmodle").eq(0).clone().html()+"</tr>"; 92 //找到父级元素中的tr，然后在后面增加增行 93 $(v).parent().parent().after(n); 94 setIndex(); 95 } 96 //删行 97 if(v.className=="del"){ 98 $(v).parent().parent().remove(); 99 setIndex();100 }101 }102 });103 });104 //组织序号105 function setIndex() {106 var t = $("table.list tr");107 t.each(function () {108 $(this).children("td").eq(0).text($(this).index());109 })110 }111 </script>112 </html>
效果图：
表格（table) 插件：支持当前行增行、删除。使用事件委托
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。