表格（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="" rel="stylesheet">
 10 <script src="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="#" 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="1">张三</option>
 67                             <option value="2">李四</option>
 68                             <option value="3">王五</option>
 69                             <option value="3">赵五</option>
 70                         </select>
 71                     </td>
 72                     <td><input type="text" value="100" /></td>
 73                     <td class="center"><a href="#" class="add">增行</a></td>
 74                     <td class="center"><a href="#" 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>
View Code

 

效果图：

 

posted @ 2014-11-19 16:48  前端E龙  阅读(601)  评论(0)  编辑  收藏  举报