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


Posted in Javascript onSeptember 27, 2016

本文分为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实现表格文本框淡入更改值后淡出效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
VUE中使用MUI方法
Feb 12 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 #Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 #Javascript
javascript动画之模拟拖拽效果篇
Sep 26 #Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 #Javascript
微信小程序 框架详解及实例应用
Sep 26 #Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 #Javascript
javascript的函数劫持浅析
Sep 26 #Javascript
You might like
写一个用户在线显示的程序
2006/10/09 PHP
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
VSCode 配置uni-app的方法
2020/07/11 Javascript
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Python 串口通信的实现
2020/09/29 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
出国留学自荐信
2013/10/25 职场文书
项目副经理岗位职责
2013/12/30 职场文书
实习生的自我评价
2014/01/08 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
给客户的感谢信
2015/01/21 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
详解Node.js如何处理ES6模块
2021/05/15 Javascript
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL