Jquery对table表格的动态修改

效果图:

Jquery对table表格的动态修改

 

 

  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>

 

Jquery对table表格的动态修改

上一篇:.net core服务程序在centos7上的部署


下一篇:js 循环精灵图案例