html表格相同合并单元格合并,jQuery实现合并表格单元格中相同行操作示例

本文实例讲述了jQuery实现合并表格单元格中相同行操作。分享给大家供大家参考，具体如下：

合并的方法

$("#tableid").mergeCell({

cols:[X,X] ///参数为要合并的列

})

/**

* 操作表格 合并单元格 行

* 2016年12月13日16:00:41

*/

(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);

示例html代码

酒店分房表

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, th, s { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; font-style:normal; text-decoration:none;word-wrap: break-word;}

body {font-family: SimSun;

font-style:italic;

font-weight:bold;

font-size:12px;

background:none;margin-left: auto;margin-right: auto;}

a { color:#000000; font-size:14px;line-height:26px; font-family:SimSun; text-decoration:none; }

a:hover { color:#000000; font-size:14px; line-height:26px; font-family:SimSun; text-decoration:none;}

.bt{color: #121212;font-size: 26px; line-height:80px;text-align: center;}

.A4 { margin:auto;width: 780px;}

.title {

color: #0070C0;

}

酒店信息和分房表

居住城市	入住日期	离店日期	酒店名称	地址
	2016-12-11	2016-12-12	性格里拉	上海

房间类型	双床房
数量共计： 5 间	5

Room	Adult	中文名	Name	Sex	Room Type
1	1	熊哥1	xsw	女	双床房1
1	2	熊哥2	xsw2222222	男	双床房1
1	3	杰森.斯坦森	Jason Statham	男	双床房1
2	4	李锡龄	Jason Statham	男	双床房2
2	5	李孝利	Jason Statham	男	双床房2
2	6	刘德国	Jason Statham	男	双床房2
3	7	杰森.四米	Jason Statham	男	双床房3
3	8	凯威.斯坦森	Jason Statham	男	双床房3
3	9	杰森史蒂文	Jason Statham	男	双床房3
4	10	5	Jason Statham	男	双床房4
4	11	3	Jason Statham	男	双床房4
4	12	1	Jason Statham	男	双床房4
4	13	杰森.托马鞍山	Jason Statham	男	双床房4
5	14	孙露	Jason Statham	男	双床房5
5	15	李红梅	Jason Statham	男	双床房5
5	16	卓越杀	Jason Statham	男	双床房5
5	17	4	Jason Statham	男	双床房5
5	18	12	Jason Statham	男	双床房5
5	19	16	Jason Statham	男	双床房5

/**

* 操作表格 合并单元格 行

* 2016年12月13日16:00:41

*/

(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_4').mergeCell({

cols:[0,5]

});

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。