jQuery实现点击该行即可删除HTML表格行


Posted in Javascript onOctober 17, 2014

jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一。它不仅不会减少在JavaScript编码简单的技术开销,而且也使您的代码的跨浏览器兼容。我已经写了许多关于jQuery教程,这个时候,我也用这个简单的纯实现了。任务是从一个HTML表使用一些时髦的效果,只要按一下该行的行。以下是实现这一目标的jQuery代码。

$(document).ready(function() {
$("#sample tr").click(function() {
//change the background color to red before removing
$(this).css("background-color","#FF3700"); 
$(this).fadeOut(400, function(){ 
$(this).remove();
});
});
});

在上面的代码中,我们都附有“#示例”表中的所有“TR”的处理程序。上按一下,我们首先改变该行的背景,然后淡出它并删除它。这是一个简单的任务。

Javascript 相关文章推荐
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
js命名空间写法示例
Dec 18 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 #Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 #Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 #Javascript
js实现飞入星星特效代码
Oct 17 #Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 #Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 #Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 #Javascript
You might like
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python中的choice()方法使用详解
2015/05/15 Python
python 容器总结整理
2017/04/04 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
python实现括号匹配的思路详解
2018/08/23 Python
python中的itertools的使用详解
2020/01/13 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python如何爬取动态网站
2020/09/09 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
数控技校生自我鉴定
2014/04/19 职场文书
学习保证书范文
2014/04/30 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
政协委员个人总结
2015/03/03 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS