合并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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
js中开关变量使用实例
Feb 24 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
jQuery实现计算器功能
Oct 19 jQuery
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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邮件类
2007/01/03 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
php创建无限级树型菜单
2015/11/05 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Python实现SMTP邮件发送
2020/06/16 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
影视制作岗位职责
2013/12/04 职场文书
个人委托书
2014/07/31 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
承诺函范文
2015/01/21 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
自信主题班会
2015/08/14 职场文书
《搭石》教学反思
2016/02/18 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
python_tkinter事件类型详情
2022/03/20 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js