基于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 相关文章推荐
js简单实现交换Li的值
May 22 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
校园摄影活动策划方案
2014/02/05 职场文书
贺卡寄语大全
2014/04/11 职场文书
合伙协议书
2014/04/23 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
淘宝好评语句大全
2014/12/31 职场文书
Python sklearn分类决策树方法详解
2022/09/23 Python