本文实例讲述了jQuery实现合并表格单元格中相同行操作。分享给大家供大家参考，具体如下：
合并的方法
$("#tableid").mergeCell({
cols:[X,X] ///参数为要合并的列
})
(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
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作xml技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
