使用jQuery 操作table 完成单元格合并的实例
程序员文章站
2022-05-07 15:01:20
比较表格的内容。判断是否合并单元格:
tr = $("#printpage tr").length;// 获取当前表格中tr的个数
var mark = 0;...
比较表格的内容。判断是否合并单元格:
tr = $("#printpage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格,需要存储两个参数, * 1,开始合并的单元格的第一行的行数, * 2.要合并的单元格的个数 **/ console.log(tr); //判断 若只有一行数据,则不做调整 if(tr <= 2){ }else{ //var i=1 比较当前的tr和上一个tr的值 for(var i=0;i < tr ;i++){ var ford = $("#printpage tr:gt(0):eq("+i+") td:eq(0)").text(); //根据下标获取单元格的值 // tr:gt(0) 从下标0 开始获取 // tr:gt(0):eq( i ) :i 标识 当前行的下标 ,0 开始 // td:eq(0) 当前行的第一个单元格,下标从0开始 var behind = $("#printpage tr:gt(0):eq("+(parseint(i)+1)+") td:eq(0)").text(); if(ford == behind){ $("#printpage tr:gt(0):eq("+(parseint(i)+1)+") td:eq(0)").hide(); mark = mark +1; }else if(ford != behind){ //如果值不匹配则遍历到不同种的分类,将旧分类隐藏 index = i-mark; $("#printpage tr:gt(0):eq("+index+") td:eq(0)").attr("rowspan",mark+1);//+1 操作标识,将当前的行加入到隐藏 //rowspan 列上横跨, colspan 行上横跨 //后面的参数,表示横跨的单元格个数, //合并单元格就是将其他的单元格隐藏(hide),或删除(remove)。 //将一个单元格的rowspan 或colsspan 加大 mark = 0; $("#printpage tr:gt(0):eq("+(parseint(i))+") td:eq(0)").hide(); } } }
最终效果:
以上这篇使用jquery 操作table 完成单元格合并的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
推荐阅读
-
JS拖动选择table里的单元格完整实例【基于jQuery】
-
jquery对table做排序操作的实例演示
-
使用jQuery 操作table 完成单元格合并的实例
-
[HTML]表格标签table的使用(基本语法、属性、单元格合并)
-
Jquery AutoComplete自动完成 的使用方法实例_jquery
-
使用jQuery操作table如何实现单元格合并
-
合并table相同单元格的jquery插件分享(很精简)_jquery
-
基于jquery的合并table相同单元格的插件(精简版)_jquery
-
jquery对table做排序操作的实例演示
-
合并table相同单元格的jquery插件分享(很精简)_jquery