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>