一个JQuery操作Table的代码分享


Posted in Javascript onMarch 30, 2012
一、数据准备 
<table id="table1"> 
<tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>操作</th></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
</table> 
<table id="table2"> 
<tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
</table> 
<table id="table3"> 
<thead> 
<tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr> 
</thead> 
<tbody> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
</tbody> 
</table> 
<table id="table4"> 
<thead> 
<tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr> 
</thead> 
<tbody> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr> 
<tr><td>测试3</td><td>测试</td><td>测试</td><td>测试</td></tr> 
</tbody> 
</table> 
二、操作 
<script type="text/javascript"> 
//1.鼠标移动行变色 
$("#table1 tr").hover(function(){ 
$(this).children("td").addClass("hover") 
},function(){ 
$(this).children("td").removeClass("hover") 
}) 
$("#table2 tr:gt(0)").hover(function() { 
$(this).children("td").addClass("hover"); 
}, function() { 
$(this).children("td").removeClass("hover"); 
}); 
//2.奇偶行不同颜色 
$("#table3 tbody tr:odd").css("background-color", "#bbf"); 
$("#table3 tbody tr:even").css("background-color","#ffc"); 
$("#table3 tbody tr:odd").addClass("odd") 
$("#table3 tbody tr:even").addClass("even") 
//3.隐藏一行 
$("#table3 tbody tr:eq(3)").hide(); 
//4.隐藏一列 
$("#table5 tr td::nth-child(3)").hide(); 
$("#table5 tr").each(function(){$("td:eq(3)",this).hide()}); 
//5.删除一行 
// 删除除第一行外的所有行 
$("#table6 tr:not(:first)").remove(); 
//6.删除一列 
// 删除除第一列外的所有列 
$("#table6 tr td:not(:nth-child(1))").remove(); 
//7.得到(设置)某个单元格的值 
//设置table7,第2个tr的第一个td的值。 
$("#table7 tr:eq(1) td:nth-child(1)").html("value"); 
//获取table7,第2个tr的第一个td的值。 
$("#table7 tr:eq(1) td:nth-child(1)").html(); 
//8.插入一行: 
//在第二个tr后插入一行 
$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)")); 
</script>
Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 Javascript
javascript工具库代码
Mar 29 #Javascript
Web开发之JavaScript
Mar 29 #Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 #Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 #Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 #Javascript
50款非常棒的 jQuery 插件分享
Mar 29 #Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 #Javascript
You might like
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python获取文件扩展名的方法
2015/07/06 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
python机器学习之决策树分类详解
2017/12/20 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
Python中装饰器学习总结
2018/02/10 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
开工仪式主持词
2014/03/20 职场文书
篝火晚会主持词
2014/03/25 职场文书
微电影大赛策划方案
2014/06/05 职场文书
2014年电厂工作总结
2014/12/04 职场文书
绵山导游词
2015/02/05 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js