转载自
http://www.cnblogs.com/pipizhu/archive/2010/09/26/1835314.html
一.数据准备
<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>
二、操作
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)"));
分享到:
相关推荐
jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
jQuery第2天知识点:jQuery 样式操作、jQuery 属性操作.zip
jQuery第3天知识点:jQuery 属性操作、jQuery三组基本动画、自定义动画animate.zip
第三十一节:jQuery速成- 数组和对象的操作 第三十二节:jQuery速成- 工具杂项 第八章:高级篇 - Ajax异步请求及调用实战 第三十三节:jQuery速成- Ajax请求 (讲解篇) 第三十四节:jQuery速成- Ajax请求 (实战篇)
、CSS和JavaScript知识的开发者,内容覆盖了jQuery知识体系的全部内容,包括jQuery Core、jQuery Plugin 、jQuery UI、jQuery Mobile以及大量第三方的插件库和2800多个应用jQuery技术的网页参考。
jquery实现父元素大小改变插件:jquery-resize
jQuery:jQuery.extend函数详解
jquery 表格 jquery table
jquery自下而上循环滚动table
bootstrap-table拖拽需要dragtable.css,jquery.dragtable.js,jquery-ui.js,bootstrap-table-reorder-columns.js
jquery.cookie:jquery Cookie操作 jquery.form:jquery表单提交(ajax方式或其它方式自定) jquery.idTabs:jquery选项卡 jquery.pager:分页 jquery.progressbar.min:进度条 jquery.timers-1.2:计时器 jquery....
ASP.NET MVC框架开发系列课程(19):jQuery与AJAX
DateTimePicker:jQuery日期和时间插件 http://www.jq22.com/jquery-info332 http://blog.csdn.net/linbounconstraint/article/details/50132061
主要介绍了jQuery实现动态给table赋值的方法,结合具体实例形式分析了jQuery动态操作table表格节点的相关技巧,需要的朋友可以参考下
*功能对照表: * 名称 参数 参数描叙 方法描叙 类型 ====>数据加载 * loadData dataSource, 数据源 数据加载JSON或者Array 功能 isTh 是否包含TH文件头 ====>数据获取 * getJSONData - ...
* jquery 表格打印插件 * * 作者: LiuJunGuang * 日期:2013年6月4日 * 分页样式(需要自定义): * @media print { * .pageBreak { page-break-after:always; } * } * 使用例子: * $(function(){ * $...
jqueryTable编辑的实现 鼠标点击表格即可编辑,onblur时候出发Ajax时间 保存数据(带娇艳功能)。
一个想当漂亮的jquery提示框:jQuery Modal Dialog弹出对话框插件,可用它实现各种的网页提示效果,比如错误提示框、警告框、操作提示框等,暖色调界面,使用方法简单,参考本例所展示的各种提示框生成办法,就可...
本文实例讲述了jQuery表格(Table)基本操作。分享给大家供大家参考,具体如下: Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结。 首先建立一个通用的表格css 和一个 表格Table: ...