jQuery实现表格文本框淡入更改值后淡出效果
本文分为html代码和jquery两段代码，代码很简单，大家可以参考下！
html代码
<tablestyle="border:1pxsolidblue"> <tr> <th>id</th> <th>name</th> <th>age</th> <th>sex</th> <th>操作</th> </tr> <tr> <tdclass="td1">1</td> <tdclass="td1">珠珠</td> <tdclass="td1">21</td> <tdclass="td1">女</td> <tdclass="td2"></td> </tr> <tr> <tdclass="td1">2</td> <tdclass="td1">琛琛</td> <tdclass="td1">18</td> <tdclass="td1">男</td> <tdclass="td2"></td> </tr> </table>
jquery代码
<script>
vara;
$(document).ready(function(){
$("td[class='td1']").click(function(){
vartdlist=$(this).parent().children();//获取td
a="<trstyle='display:none'>";
tdlist.each(function(i){
vartext=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>";
}
elseif(i==0){
a+="<td><inputtype='text'readonly='true'value='"+text+"'></td>";
}
else{
a+="<td><inputtype='text'value='"+text+"'></td>";
}
}
});
a+="</tr>";
$(this).parent().after(a).next().fadeIn("3000");
});
$(this).delegate("button","click",function(){
varlist=$(this).parent().parent().children();//当前td的值
varli=$(this).parent().parent();//当前tr
list.each(function(i){
varb=list.eq(i).children().eq(0).val();//当前input的值
varshngjitd=li.prev().children();//上一级td
if(list.length!=(i+1)){
shngjitd.eq(i).text(b);
li.fadeOut("3000");
}
else{
list.eq(i).text("");
}
});
});
});
</script>
以上所述是小编给大家介绍的jQuery实现表格文本框淡入更改值后淡出效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！