合并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 相关文章推荐
jquery 笔记 事件
Nov 02 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
小程序实现多选框功能
Oct 30 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
使用js和canvas实现时钟效果
Sep 08 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中使用灵巧的体系结构
2006/10/09 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
python django集成cas验证系统
2014/07/14 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
安全生产投入制度
2014/01/29 职场文书
产品生产计划书
2014/05/07 职场文书
新店开张宣传语
2015/07/13 职场文书
医德医风学习心得体会
2016/01/25 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
用JS实现飞机大战小游戏
2021/06/09 Javascript
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
Python使用永中文档转换服务
2022/05/06 Python