使用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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php curl基本操作详解
2013/07/23 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
php开发工具有哪五款
2015/11/09 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP new static 和 new self详解
2017/02/19 PHP
Javascript的一种模块模式
2010/09/08 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
vue router demo详解
2017/10/13 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
javascript实现滚轮轮播图片
2020/12/13 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
警示教育活动总结
2014/05/05 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
英语教师个人总结
2015/02/09 职场文书
信仰观后感
2015/06/03 职场文书