首页 > 编程 > JavaScript > 正文

jQuery实现表格文本框淡入更改值后淡出效果

2019-11-20 08:52:32
字体:
来源:转载
供稿:网友

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

html代码

<table style="border:1px solid blue"><tr><th>id</th><th>name</th><th>age</th><th>sex</th><th>操作</th></tr><tr><td class="td1">1</td><td class="td1">珠珠</td><td class="td1">21</td><td class="td1">女</td><td class="td2"></td></tr><tr><td class="td1">2</td><td class="td1">琛琛</td><td class="td1">18</td><td class="td1">男</td><td class="td2"></td></tr></table>

jquery代码

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表