使用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中map函数的两种方式
Apr 07 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jquery实现搜索框功能实例详解
Jul 23 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
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python爬虫容易学吗
2020/06/02 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
中文师范生自荐信
2014/01/30 职场文书
车辆转让协议书
2014/04/15 职场文书
房地产端午节活动方案
2014/08/24 职场文书
白鹤梁导游词
2015/02/06 职场文书
廉政承诺书范文
2015/04/28 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS