使用jQuery 操作table 完成单元格合并的实例


Posted in jQuery onDecember 27, 2017

比较表格的内容。判断是否合并单元格:

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 完成单元格合并的实例

以上这篇使用jQuery 操作table 完成单元格合并的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery树插件zTree使用方法详解
May 02 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 #jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
You might like
PHP 开发工具
2006/12/06 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
php扩展开发入门demo示例
2019/09/23 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
javascript 面向对象封装与继承
2014/11/27 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Django的CVB实例详解
2020/02/10 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
python zip()函数的使用示例
2020/09/23 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
有关朝花夕拾的读书笔记
2015/06/29 职场文书
高效课堂教学反思
2016/02/24 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记