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

编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery实现表格文本框淡入更改值后淡出效果的实现代码,代码简单易懂,非常不错,需要的朋友可以参考下

本文分为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();//获取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>确定</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实现表格文本框淡入更改值后淡出效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板