效果图：
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>