基于jquery的合并table相同单元格的插件(精简版)


Posted in Javascript onApril 05, 2011

效果如下

原表格:

col0 col1 col2 col3
SuZhou 11111 22222 SuZhouCity
SuZhou 33333 44444 SuZhouCity
SuZhou 55555 66666 SuZhouCity
ShangHai 77777 88888 ShangHaiCity
ShangHai uuuuu hhhhh ShangHaiCity
ShangHai ggggg ccccc ShangHaiCity
GuangZhou ttttt eeeee GuangZhouCity
GuangZhou ppppp qqqqq GuangZhouCity

处理之后的样子:

col0 col1 col2 col3
SuZhou 11111 22222 SuZhouCity
33333 44444
55555 66666
ShangHai 77777 88888 ShangHaiCity
uuuuu hhhhh
ggggg ccccc
GuangZhou ttttt eeeee GuangZhouCity
ppppp qqqqq

效果出来, 看上去比较简单, 下面先看下页面

<table id="process" cellpadding="2" cellspacing="0" border="1"> 
<thead> 
<tr > 
<td>col0</td> 
<td>col1</td> 
<td>col2</td> 
<td>col3</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>SuZhou</td> 
<td>11111</td> 
<td>22222</td> 
<td>SuZhouCity</td> 
</tr> 
<tr> 
<td>SuZhou</td> 
<td>33333</td> 
<td>44444</td> 
<td>SuZhouCity</td> 
</tr> 
<tr> 
<td>SuZhou</td> 
<td>55555</td> 
<td>66666</td> 
<td>SuZhouCity</td> 
</tr> 
<tr> 
<td>ShangHai</td> 
<td>77777</td> 
<td>88888</td> 
<td>ShangHaiCity</td> 
</tr> 
<tr> 
<td>ShangHai</td> 
<td>uuuuu</td> 
<td>hhhhh</td> 
<td>ShangHaiCity</td> 
</tr> 
<tr> 
<td>ShangHai</td> 
<td>ggggg</td> 
<td>ccccc</td> 
<td>ShangHaiCity</td> 
</tr> 
<tr> 
<td>GuangZhou</td> 
<td>ttttt</td> 
<td>eeeee</td> 
<td>GuangZhouCity</td> 
</tr> 
<tr> 
<td>GuangZhou</td> 
<td>ppppp</td> 
<td>qqqqq</td> 
<td>GuangZhouCity</td> 
</tr> 
</tbody> 
</table>

核心代码:
// 这里写成了一个jquery插件的形式 
$('#process').mergeCell({ 
// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始 
// 然后根据指定列来处理(合并)相同内容单元格 
cols: [0, 3] 
});

下面看看这个小插件的完整代码:
;(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设置rowspan 
if (++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);

主要的说明在注释里应该都有了, 代码的确比较简单, 像有些地方还值得改进
•处理的table内容是从tbody开始查找的, 如果没有tbody, 那应该给出个更通用化的方案
•for ( var i = cols.length - 1; cols[i] != undefined; i--)...如果表格数据量大, 处理的列也比较多, 这里不进行优化会有造成浏览器线程阻塞的风险, 可以考虑用setTimeout
•其他什么值得改进的, 我想应该会不少的
Javascript 相关文章推荐
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
比较node.js和Deno
Apr 27 Javascript
新鲜出炉的js tips提示效果
Apr 03 #Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 #Javascript
dreamweaver 安装Jquery智能提示
Apr 02 #Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 #Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 #Javascript
JQuery文本框高亮显示插件代码
Apr 02 #Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 #Javascript
You might like
咖啡语言
2021/03/03 咖啡文化
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python装饰器原理与用法深入详解
2019/12/19 Python
pandas的相关系数与协方差实例
2019/12/27 Python
django 取消csrf限制的实例
2020/03/13 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
介绍一下Linux文件的记录形式
2013/09/29 面试题
劳动模范事迹材料
2014/01/19 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
项目投资意向书
2014/04/01 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python