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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
一些不错的js函数ajax
2008/08/20 Javascript
javascript css float属性的特殊写法
2008/11/13 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
js实现放大镜特效
2017/05/18 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
python中list常用操作实例详解
2015/06/03 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
电气专业应届生求职信
2013/11/01 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
机械系毕业生求职信
2014/05/28 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python