这篇文章将为大家详细讲解有关使用jQuery怎么合并表格单元格中相同的行，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
合并的方法
$("#tableid").mergeCell({
cols:[X,X]///参数为要合并的列
})/**
*操作表格合并单元格行
*2016年12月13日16:00:41
*/
(function($){
//看过jquery源码就可以发现$.fn就是$.prototype,只是为了兼容早期版本的插件
//才保留了jQuery.prototype这个形式
$.fn.mergeCell=function(options){
returnthis.each(function(){
varcols=options.cols;
for(vari=cols.length-1;cols[i]!=undefined;i--){
//fixbugconsole调试
//console.debug(cols[i]);
mergeCell($(this),cols[i]);
}
dispose($(this));
});
};
//如果对javascript的closure和scope概念比较清楚,这是个插件内部使用的private方法
//具体可以参考本人前一篇随笔里介绍的那本书
functionmergeCell($table,colIndex){
$table.data('col-content','');//存放单元格内容
$table.data('col-rowspan',1);//存放计算的rowspan值默认为1
$table.data('col-td',$());//存放发现的第一个与前一行比较结果不同td(jQuery封装过的),默认一个"空"的jquery对象
$table.data('trNum',$('tbodytr',$table).length);//要处理表格的总行数,用于最后一行做特殊处理时进行判断之用
//我们对每一行数据进行"扫面"处理关键是定位col-td,和其对应的rowspan
$('tbodytr',$table).each(function(index){
//td:eq中的colIndex即列索引
var$td=$('td:eq('+colIndex+')',this);
//取出单元格的当前内容
varcurrentContent=$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累加,保存新值
varrowspan=$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函数清理内存之用
functiondispose($table){
$table.removeData();
}
})(jQuery);示例html代码
酒店分房表
html,body,div,span,object,iframe,h2,h3,h4,h5,h6,h7,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;
}
酒店信息和分房表
