jquery操作表格 合并单元格
$('#table_2').mergeCell({cols: [7,8,9] ///参数为要合并的列,例如[0,5],表示第0和第5列});/**
* 操作表格 合并单元格 行
* 2016年12月13日16:00:41
*/(function ($) {// 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件// 才保留了jQuery.prototype这个形式$.fn.mergeCell = function (options) {return this.each(function () {var cols = options.cols;for (var i = cols.length - 1; cols[i] != undefined; i--) {// fixbug console调试// console.debug(cols[i]);mergeCell($(this), cols[i]);}dispose($(this));});};// 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法// 具体可以参考本人前一篇随笔里介绍的那本书function mergeCell($table, colIndex) {$table.data('col-content', ''); // 存放单元格内容$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1$table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象$table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用// 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan$('tbody tr', $table).each(function (index) {// td:eq中的colIndex即列索引var $td = $('td:eq(' + colIndex + ')', this);// 取出单元格的当前内容var currentContent = $td.html();// 第一次时走此分支if ($table.data('col-content') == '') {$table.data('col-content', currentContent);$table.data('col-td', $td);} else {// 上一行与当前行内容相同if ($table.data('col-content') == currentContent) {// 上一行与当前行内容相同则col-rowspan累加, 保存新值var rowspan = $table.data('col-rowspan') + 1;$table.data('col-rowspan', rowspan);// 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响$td.hide();// 最后一行的情况比较特殊一点// 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspanif (++index == $table.data('trNum'))$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));} else { // 上一行与当前行内容不同// col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理if ($table.data('col-rowspan') != 1) {$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));}// 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan$table.data('col-td', $td);$table.data('col-content', $td.html());$table.data('col-rowspan', 1);}}});}// 同样是个private函数 清理内存之用function dispose($table) {$table.removeData();}})(jQuery);
作者:熊哥club
出处:熊哥club - 博客园
个人网站:更多精彩博文请转向熊哥的独立博客站点:https://www.xiongge.club/
jquery操作表格 合并单元格相关推荐
- java doc 合并单元格_AsposeWords操作表格合并单元格
强大的AsposeWords for java不仅支持创建表格,还支持合并单元格.今天就简明扼要记录下如何实现合并单元格. 大家可以完全套用本文提供的代码,只需要提供开始和结束的单元格即可实现合并,无 ...
- 记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作 最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
- layui实现表格合并单元格,设置不同背景色
最近在使用layui的过程中,遇到了表格合并单元格,设置不同背景色的问题. 在此总结,大家一起学习. 同一组新闻的底色相同,效果如下: 实现代码: <script>layui.config ...
- layui表格合并单元格
思想:layui表格合并单元格,layui并没有给出相应的解决办法:那么我们可以在前端使用js将相邻并相同的单元格合并: 1.页面代码: <!DOCTYPE html> <html ...
- html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
- 【markdown】表格合并单元格
[markdown]表格合并单元格 DEMO DEMO 效果 参考链接 :[markdown]表格合并单元格 DEMO <table><tr><th>属性</ ...
- elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行 需求:使用vue + elementUI 实现如下表格: 省份 城市 区域 人口 贵州 遵义 汇川区 100 红花岗区 100 播州区 100 贵阳 ...
- 使用POI创建word表格合并单元格兼容wps
poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...
- C# 操作word表格合并单元格
C# 操作word表格 遇到合并单元格的时候,假设表格是3行6列 newTable.Cell(1, 1).Merge(newTable.Cell(1, 3));//合并第1行第1列到横向单元格合并,使 ...
最新文章
- 嵌入式linux笔记,嵌入式linux学习笔记(一)----嵌入式操作系统
- java inflaterinputstream_java.util.zip.InflaterInputStream.available()方法示例
- java注销登录_java实现注销登录
- 【中间件】消息队列-RabbitMQ
- python控制手机自动刷新闻_Python脚本利用adb进行手机控制的方法
- 第四范式“金融范”系列分享会第二期开课:人工智能强化金融风控
- 【python自动化办公01】word操作-新建文档
- [蓝桥杯2015决赛]积分之迷-枚举(水题)
- 本地计算机所安装的网络组件,3.2 在本地计算机中安装和配置IIS
- linux设备驱动开发专业论坛www.linuxdriver.cn诚征斑竹
- struts2路径配置_Struts 2结果路径配置示例
- JAVA IO - RandomAccessFile
- sharepoint 2013 配件控制FileUpload如何检查是否图像的方法
- sed 、awk用法
- Qt容器类之三:通用算法
- LeetCode11 盛最多水的容器
- java中计算两日期相减方法
- 基于C#窗体的酒店管理系统
- 思科模拟器Cisco Packet Tracer语言汉化包设置(附下载链接)
- 数字孪生技术在交通运输领域管理应用【案例解析】
热门文章
- 前沿重器[7] | 小布助手登顶百度千言短文本相似度的秘诀
- Goland自定义头部注释,增加author和data等(学习笔记,不作教程)
- 基于Echarts实现可视化数据大屏实时监测地图
- 风火轮树莓派3卡片电脑介绍
- Android连接蓝牙打开SCO,实现蓝牙耳机输入
- 论文阅读:Generating Abstractive Summaries with Finetuned Language Models
- 在测试tensorBroad中在运行mnist_with_summaries.py时URLError:urlopen error [WinError 10060] 由于连接方在一段时间后没有正确答
- 蚪侠模板站群-V25版[泛域名+泛目录+泛内页]-[代码+汉字]干扰-字体繁简切换-蜘蛛欺骗-主动推送-全局锚文本锁定-自动新闻采集-自动模板采集
- html动态网页添加音频_将音频添加到网页
- Modbus RS485 设备的串口调试