一.数据准备
<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)"));
转自:http://www.it118.org/Specials/342c8f06-27b9-4791-a663-646cb502cf6c/28d9d3b5-4373-44b3-953c-4705834a503b.htm
分享到:
相关推荐
2,Jquery 操作 Table 的数据,主要是增删改查不显示在每一条数据的后面; 3,对修改操作使用了jquery.cookie.js ,并做了cookie最大值的判断,防止无效(其实不判断最大值也关系不大); 4,页面需要自己美化; 5,...
NULL 博文链接:https://xiaomaha.iteye.com/blog/1106606
基于jQuery的表头表尾固定组件 ========== table的表头表尾fixed效果,使用浏览器滚动条。兼容IE6 要求表头表尾必须在thead tfoot内 by esky 2014-02-13 步骤1:table加入外部布局容器e-tbWrap, 并生成最外层包裹容器...
比较表格的内容。判断是否合并单元格: tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格,需要存储两个参数, ...
jquery.table jquery.Table是一个易于使用的基于JQuery的插件,用于表数据管理和操作。技术支持内联编辑基于公式的计算资料输入值格式键盘导航例子 <!DOCTYPE html >< html lang =" en " >< head > &...
基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...
主要介绍了jQuery动态操作表单,结合实例形式分析了jQuery针对table表格的数据添加、删除、元素修改、提交等相关操作技巧,需要的朋友可以参考下
主要介绍了jQuery实现带分组数据的Table表头排序方法,结合实例形式较为详细的分析了jQuery针对表头的操作及元素遍历排序相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
getTable返回一个jQuery对象(或其中的Array),因此您可以对它们执行任何操作。 该表是通过DOM解析的,它是快速,正确的,并且缓存了这些数据。 // Get rows that include target cell. rows = $ ( 'td#target' ...
主要介绍了jquery对table做排序操作的实例演示,通过添加自定义属性data-sort-field-ftime及表头添加onchange事件详细讲解了操作过程,需要的朋友可以参考下
脚本资源,jQuery,键盘 KeyTable是一个基于JavaScript的jQuery插件库,它在网页上提供类似键盘导航事件,与KeyTable Excel样式表中的导航功能差不多,它可以让一份在HTML网页中显示的表格无需使用鼠标操作,...
但是我们在日常应用中仍然要用到table表格,其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形...
首先要获取Table表格的行数,我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图: 如果我要打印这个表格但不想要操作那列的内容咋办? 代码如下: for(var i=0;i<num+1;i++) { $...
网上找到js或jquery插件都不满足现在用的需求,所自己做个jquery插件. 主要功能类似excel对表头的操作, js文件里有使用说明。
用jquery实现的表格常用操作 1.表头固定 2.页脚求和 3.行隐藏 4.列隐藏 5.悬浮变色 6.表头排序
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便...还有,使用前请引入bootstrap的相关css,js,jQuery,以及bootstrap-table的css,
主要介绍了jQuery实现合并表格单元格中相同行操作,结合实例形式分析了jQuery针对table表格实现单元格合并的相关操作技巧,需要的朋友可以参考下
借助KeyTable,您可以在DataTables增强型表(如Excel电子表格)上使用键盘导航-单元格显示焦点轮廓,可以使用键盘或鼠标操作来移动焦点轮廓。 这在使用编辑器的可编辑表中特别有用,该表允许最终用户非常快速地更新...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
批量提交用jquery操作起来还是很方便的,主要的思路就是 在动态生成表格时每一行都存下这条数据的唯一id,然后监听选择,把选中的数据放入数组,最后提交到后台就OK了。 先上一部分代码(这是表头以及一个全选按钮)...