效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/4c05e717340ab0d3eb559744fec981cf.png)
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <script type="text/javascript" src="js/jquery.js"></script>
8 </head>
9
10 <body>
11 <div>
12 <a href="#" class="add">增加</a>
13 <input type="text" class="sel_id" />
14 <a href="#" class="sel">查询</a>
15
16 </div>
17 <table>
18 <thead>
19 <th>ID</th>
20 <th>姓名</th>
21 <th>薪水</th>
22 <th>功能</th>
23 </thead>
24 <tr>
25 <td>1</td>
26 <td>张三</td>
27 <td>8000</td>
28 <td>
29 <a href="#" class="update">修改</a>
30
31 <a href="#" class="del">删除</a>
32 </td>
33 </tr>
34 <tr>
35 <td>2</td>
36 <td>李四</td>
37 <td>10000</td>
38 <td>
39 <a href="#" class="update">修改</a>
40
41 <a href="#" class="del">删除</a>
42 </td>
43 </tr>
44 </table>
45 <script type="text/javascript">
46 $(function() {
47 //添加
48 $('.add').click(function() {
49 var tr_ = $('<tr></tr>');
50 var td_id = $('<td>' + $('tr').children('td').eq(0).text() + '</td>');
51 var td_name = $('<td>' + $('tr').children('td').eq(1).text() + '</td>');
52 var td_price = $('<td>' + $('tr').children('td').eq(2).text() + '</td>');
53 var td_a = $('<td><a href="#">修改</a>|<a href="#">删除</a></td>');
54 tr_.append(td_id);
55 tr_.append(td_name);
56 tr_.append(td_price);
57 tr_.append(td_a);
58 //把节点添加到table
59 $('table').last().append(tr_);
60 //给刚添加的结点加上类名
61 $('tr').last().children(':last').children().eq(0).addClass("update");
62 $('tr').last().children(':last').children().eq(1).addClass("del");
63 //删除方法
64 $('.del').click(function shanchu() {
65 $(this).parent().parent().remove();
66 })
67 //修改方法
68 $('.update').click(function xiugai() {
69 if($(this).text() == "修改") {
70 $('tr').each(function() {
71 var id = $(this).children('td').eq(0).text();
72 $(this).children('td').eq(0).text('')
73 $(this).children('td').eq(0).append('<input type="text" value="' + id + '" />')
74
75 id = $(this).children('td').eq(1).text();
76 $(this).children('td').eq(1).text('')
77 $(this).children('td').eq(1).append('<input type="text" value="' + id + '" />')
78
79 id = $(this).children('td').eq(2).text();
80 $(this).children('td').eq(2).text('')
81 $(this).children('td').eq(2).append('<input type="text" value="' + id + '" />')
82
83 $(this).children('td').eq(3).children().eq(0).text('保存')
84 })
85 } else {
86 $('tr').each(function() {
87 var id = $(this).children('td').eq(0).children(':first').val();
88 $(this).children('td').eq(0).text(id)
89
90 id = $(this).children('td').eq(1).children(':first').val();
91 $(this).children('td').eq(1).text(id)
92
93 id = $(this).children('td').eq(2).children(':first').val();
94 $(this).children('td').eq(2).text(id)
95
96 $(this).children('td').eq(3).children().eq(0).text('修改')
97 })
98 }
99
100 })
101
102 })
103 //查询
104 $('.sel').click(function() {
105 // alert($('.sel_id').val().length==0)
106 if($('.sel_id').val().length == 0) {
107 $('tr').each(function() {
108 $(this).show()
109 })
110 return;
111 }
112 var id = $('.sel_id').val();
113 $('tr').each(function() {
114 var curId = $(this).children(':first').text();
115 if(id != curId) {
116 $(this).hide();
117 } else {
118 $(this).show()
119 }
120 })
121 })
122 //删除
123 $('.del').click(function shanchu() {
124 $(this).parent().parent().remove();
125 })
126 //修改
127 $('.update').click(function xiugai() {
128 if($(this).text() == "修改") {
129 $('tr').each(function() {
130 var id = $(this).children('td').eq(0).text();
131 $(this).children('td').eq(0).text('')
132 $(this).children('td').eq(0).append('<input type="text" value="' + id + '" />')
133
134 id = $(this).children('td').eq(1).text();
135 $(this).children('td').eq(1).text('')
136 $(this).children('td').eq(1).append('<input type="text" value="' + id + '" />')
137
138 id = $(this).children('td').eq(2).text();
139 $(this).children('td').eq(2).text('')
140 $(this).children('td').eq(2).append('<input type="text" value="' + id + '" />')
141
142 $(this).children('td').eq(3).children().eq(0).text('保存')
143 })
144 } else {
145 $('tr').each(function() {
146 var id = $(this).children('td').eq(0).children(':first').val();
147 $(this).children('td').eq(0).text(id)
148
149 id = $(this).children('td').eq(1).children(':first').val();
150 $(this).children('td').eq(1).text(id)
151
152 id = $(this).children('td').eq(2).children(':first').val();
153 $(this).children('td').eq(2).text(id)
154
155 $(this).children('td').eq(3).children().eq(0).text('修改')
156 })
157 }
158
159 })
160 })
161 </script>
162 </body>
163
164 </html>