HTML code
<table style= "border:1px solid Blue" >
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
<th> Operations </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" > Men </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). Parent (). After (a). Next (). FadeIn ("3000");
});
$ (this). Delegate ("button", "click", Function () {
var list = $ (this). Parent (). Parent (). Children ();//value of current TD
var li = $ (this). Parent (). parent ();//Current TR
List.each (function (i) {
var B = List.eq (i). Children (). EQ (0). val ();//value of current input
var shngjitd=li.prev (). Children ();//upper-level TD
if (list.length! = (i+1)) {
Shngjitd.eq (i). Text (b);
Li.fadeout ("3000");
}
else {
List.eq (i). Text ("");
}
});
});
});
</script>
jquery implements a table text box fade-in change value fade out