一个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 03 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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
PHP+DBM的同学录程序(3)
2006/10/09 PHP
mysql limit查询优化分析
2008/11/12 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
jquery easyui使用心得
2014/07/07 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
python字典排序的方法
2019/10/12 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
南京软件公司的.net程序员笔试题
2014/08/31 面试题
教育系毕业生中文求职信范文
2013/10/06 职场文书
个人求职简历的自我评价范文
2013/10/09 职场文书
军训心得体会
2013/12/31 职场文书
女子职高个人自荐书
2014/02/01 职场文书
学校个人对照检查材料
2014/08/26 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB