使用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和ajax代替iframe的方法(详解)
Apr 12 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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
一个捕获函数输出的函数
2007/02/14 PHP
PHP详细彻底学习Smarty
2008/03/27 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
Python中的super()方法使用简介
2015/08/14 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
2014年会演讲稿范文
2014/01/06 职场文书
七年级数学教学反思
2014/01/22 职场文书
社区平安建设方案
2014/05/25 职场文书
电工实训报告总结
2014/11/05 职场文书