表格修改特效

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title></title>
  6       <script src="jq/jquery-3.0.0.min.js"></script>
  7 </head>
  8 
  9 <body>
 10         <div>
 11             <table width="75%" border="1" height="200">
 12                 <tr>
 13                     <th class="a">id</th>
 14                     <th class="a">name</th>
 15                     <th class="a">age</th>
 16                     <th class="a">sex</th>
 17                     <th class="b">操作</th>
 18                 </tr>
 19                 <tr>
 20                     <td class="a">1</td>
 21                     <td class="a">张三</td>
 22                     <td class="a">23</td>
 23                     <td class="a">男</td>
 24                     <td class="b"></td>
 25                 </tr>
 26                 <tr>
 27                     <td class="a">2</td>
 28                     <td class="a">李四</td>
 29                     <td class="a">24</td>
 30                     <td class="a">女</td>
 31                     <td class="b"></td>
 32                 </tr>
 33                 <tr>
 34                     <td class="a">3</td>
 35                     <td class="a">王五</td>
 36                     <td class="a">25</td>
 37                     <td class="a">男</td>
 38                     <td class="b"></td>
 39                 </tr>
 40             </table>
 41         </div>
 42         <script>
 43             $(document).ready(function () {
 44                 $("td[class='a']").click(function () {
 45                     查询所有子元素
 46                     var tdlist = $(this).parent().children();
 47                     tdlist.each(function (i) {
 48                         if (tdlist.eq(i).html().indexOf("input") < 0) {
 49                             if (tdlist.length == (i + 1)) {
 50                                 tdlist.eq(i).html("<button>确定</button>")
 51                             } else {
 52                                 var txt = tdlist.eq(i).text();
 53                                 tdlist.eq(i).html("<input type='text' value='" + txt + "'/>")
 54                             }
 55                         }
 56                     });
 57                 });
 58               $("td").delegate("button", "click", function () {
 59                     var tdlist = $(this).parent().parent().children()
 60                     tdlist.each(function (i) {
 61                         if (tdlist.length != (i + 1)) {
 62                             alert(tdlist.eq(i).children().eq(0).val());
 63                             tdlist.eq(i).text(tdlist.eq(i).children().eq(0).val())
 64                         } else {
 65                             tdlist.eq(i).text("");
 66                         }
 67                     })
 68                 });
 69             }); 
 70             $(document).ready(function () {
 71                 $("td[class='a']").click(function () {
 72                     var s = "<tr style='display:none'>";
 73                     var tdlist = $(this).parent().children();
 74                     tdlist.each(function (i) {
 75                         var txt = tdlist.eq(i).text();
 76                         if (tdlist.eq(i).html().indexOf("input") < 0 && tdlist.eq(i).html().indexOf("button") < 0) {
 77 
 78                             if (tdlist.length == (i + 1)) {
 79                                 s += "<td><button>确定</button></td>"
 80                             } else {
 81                                 s += "<td><input type='text' value='" + txt + "'/></td>";
 82                             }
 83                         }
 84                     });
 85                     s += "</tr>";
 86                     $(this).parent().after(s).next().fadeIn("5000");
 87                 });
 88                 $(this).delegate("button", "click", function () { //this为当前的td
 89                     var ttt = $(this).parent().parent();//当前的tr
 90                     var ppp = ttt.children();//当前的td
 91                     ppp.each(function (i) {
 92                         var pp = ppp.eq(i).children().eq(0).val();//当前input的值
 93                         var tra = ttt.prev().children();//上一级td
 94                         alert(tra.eq(i).val())
 95                         if ((i + 1) != ppp.length) {
 96                             tra.eq(i).text(pp);//上一级的值
 97                             ttt.fadeOut();//当前tr隐藏
 98                         } else {
 99                             tra.eq(i).text("");
100                         }
101                     })
102                 });
103             });
104 
105         </script>
106 </body>
107 </html>