最近做一个项目，需要对表格进行增行和删行。
研究了一下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>
效果图：
时间： 2024-11-09 03:05:22