合并table相同单元格的jquery插件分享(很精简)


Posted in Javascript onJune 20, 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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
javascript AutoScroller 函数类
May 29 Javascript
js日历功能对象
Jan 12 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
axios简单实现小程序延时loading指示
Jul 30 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
functional继承模式 摘自javascript:the good parts
Jun 20 #Javascript
jQuery数组处理方法汇总
Jun 20 #Javascript
jQuery UI AutoComplete 使用说明
Jun 20 #Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 #Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 #Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 #Javascript
jQuery调用WebService的实现代码
Jun 19 #Javascript
You might like
php 接口类与抽象类的实际作用
2009/11/26 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Python常见数据结构详解
2014/07/24 Python
详解Python中的各种函数的使用
2015/05/24 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
生物技术专业毕业生求职信范文
2013/12/14 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL