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 相关文章推荐
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JS实现简单的表格增删
Jan 16 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
React forwardRef的使用方法及注意点
Jun 13 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
PHP 批量更新网页内容实现代码
2010/01/05 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
初探nodeJS
2017/01/24 NodeJs
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python读取xlsx的方法
2018/12/25 Python
Django CBV类的用法详解
2019/07/26 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
P/Invoke是什么
2015/07/31 面试题
设计部经理的岗位职责
2013/11/16 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
小学新教师培训方案
2014/02/03 职场文书
保护野生动物倡议书
2014/05/16 职场文书
员工趣味活动方案
2014/08/27 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
新党员入党决心书
2015/09/22 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书