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不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
vue实现循环滚动列表
Jun 30 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
global.php
2006/12/09 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
wxPython 入门教程
2008/10/07 Python
实例讲解Python中的私有属性
2014/08/21 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
美术第二课堂活动总结
2014/07/08 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
导游词之桂林山水
2019/09/20 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
golang中的struct操作
2021/11/11 Golang