使用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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 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
discuz7 phpMysql操作类
2009/06/21 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php实现源代码加密的方法
2015/07/11 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
js单例模式的两种方案
2013/10/22 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
为什么要使用Vuex的介绍
2019/01/19 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python3中property使用方法详解
2019/04/23 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
什么是python的函数体
2020/06/19 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
高三生物教学反思
2014/01/25 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
赡养老人协议书
2014/04/21 职场文书
钱学森电影观后感
2015/06/04 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
python 如何在list中找Topk的数值和索引
2021/05/20 Python
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
python+opencv实现目标跟踪过程
2022/06/21 Python