<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()就会对其他列的处理造成影响
