基于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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
HTML TO JavaScript 转换
Jun 26 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
新鲜出炉的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
PHP安装问题
2006/10/09 PHP
模仿OSO的论坛(五)
2006/10/09 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
(function(){})()的用法与优点
2007/03/11 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
js中DOM事件绑定分析
2018/03/18 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python线程详解
2015/06/24 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
创业计划书的主要内容有哪些
2014/01/29 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
生物技术专业求职信
2014/06/10 职场文书
保管员岗位职责
2015/02/14 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
php png失真的原因及解决办法
2021/11/17 PHP