JQuery fades out after the table text box fades in and changes the value, jquery fades in

JQuery fades out after the table text box fades in and changes the value, jquery fades in

This article is divided into two sections: html code and jquery Code. The Code is very simple. You can refer to it!

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> <td class = "td1"> 1 </td> <td class = "td1"> beads </td> <td class = "td1"> 21 </td> <td class = "td1"> female </td> <td class = "td2"> </td> </tr> <td class = "td1"> 2 </td> <td class = "td1"> Chen </td> <td class = "td1"> 18 </td> <td class = "td1"> male </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 tda = "<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 (). next (). fadeIn ("3000") ;}); $ (this ). delegate ("button", "click", function () {var list = $ (this ). parent (). parent (). children (); // The current td value var li = $ (this ). parent (). parent (); // The current trlist. each (function (I) {var B = list. eq (I ). children (). eq (0 ). val (); // The current input value var shngjitd = li. prev (). children (); // The previous tdif (list. length! = (I + 1) {shngjitd. eq (I ). text (B); li. fadeOut ("3000");} else {list. eq (I ). text ("") ;}}) ;}); </script>

The above is a small series of jQuery Implementation Table text box fade in to change the value and fade out effect, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!