合并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 相关文章推荐
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
深入探寻javascript定时器
Jan 02 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
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 和 MySQL 基础教程(四)
2006/10/09 PHP
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
stripos函数知识点实例分享
2019/02/11 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Python中的with...as用法介绍
2015/05/28 Python
python实现杨辉三角思路
2017/07/14 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
《将心比心》教学反思
2014/04/08 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
Python实现滑雪小游戏
2021/09/25 Python