This article is divided into HTML code and jquery two pieces of code, the code is very simple, we can refer to the next!
HTML code
<table style= "border:1px solid blue" >
<tr>
<th>id</th>
<th>name</th >
<th>age</th>
<th>sex</th>
<th> operation </th>
</tr>
<tr>
<td class= "TD1" >1</td>
<td class= "TD1" > Beads </td>
<td class= "TD1" >21</td>
<td class= "TD1" > Women </td>
<td class= "TD2" ></td>
</tr>
<tr>
<td class= "TD1" >2</td>
<td class= "TD1" > Aachen </td >
<td class= "TD1" >18</td>
<td class= "TD1" > Man </td>
<td class= "TD2" > </td>
</tr>
</table>
jquery Code
<script> var A; $ (document). Ready (function () {$ ("td[class= ' TD1 ']"). Click (function () {var tdlist = $ (this). Parent (). Children ();//
Get td a = "<TR style= ' Display:none ' >"; Tdlist.each (function (i) {var text = Tdlist.eq (i). text (); if (Tdlist.eq (i). html (). INDEXOF ("input") < 0&& Tdlist.eq (i). html (). IndexOf ("button") <0) {if (Tdlist.length = = (i + 1)) {a+= "<td><button> OK </button
></td> "; else if (i==0) {A + = "<td><input type= ' text ' readonly= ' true ' value= '" + text + ' ' ></td> ";} else {A +
= "<td><input type= ' text ' value= '" +text+ "' ></td>";
}
}
});
A + + "</tr>";
$ (this). After (a). Next (). FadeIn ("3000");
}); $ (this). Delegate (' button ', ' click ', function () {var list = $ (this). Parent (). Parent (). Children ()//current TD value Var Li = $ (this ). Parent (). Parent ()//Current TR List.each (function (i) {var b = list.eq (i). Children (). EQ (0). val ();//Current input value var shngjitd= Li.prev (). Children ()//up-level TD if (List.length!= (i+1) {Shngjitd.eq (i). Text (b); Li.fadeout ("3000");} else {list.eq (i). Text ("");}); </script>
The above is a small set of jquery to introduce you to the implementation of the table text box fade in the value of the change in the effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!