本文分为html代码和jquery两段代码，代码很简单，大家可以参考下！

html代码

<table> <tr> <th>id</th> <th>name</th> <th>age</th> <th>sex</th> <th>操作</th> </tr> <tr> <td>1</td> <td>珠珠</td> <td>21</td> <td>女</td> <td></td> </tr> <tr> <td>2</td> <td>琛琛</td> <td>18</td> <td>男</td> <td></td> </tr> </table>

jquery代码

<script> var a; $(document).ready(function () { $("td[class='td1']").click(function () { var tdlist = $(this).parent().children();//获取td a = "<tr>"; 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>确定</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();//当前td的值 var li = $(this).parent().parent();//当前tr list.each(function (i) { var b = list.eq(i).children().eq(0).val();//当前input的值 var shngjitd=li.prev().children();//上一级td if (list.length != (i+1)) { shngjitd.eq(i).text(b); li.fadeOut("3000"); } else { list.eq(i).text(""); } }); }); }); </script>

以上所述是小编给大家介绍的jQuery实现表格文本框淡入更改值后淡出效果，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！