基于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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 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
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
关于php循环跳出的问题
2013/07/01 PHP
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
node.js中的require使用详解
2014/12/15 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
2013年学期结束动员演讲稿
2014/01/07 职场文书
退休感言
2014/01/28 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
校园安全标语
2014/06/07 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
初二英语教学反思
2016/02/15 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python