使用jQuery怎么合并表格单元格中相同的行

tangjin

作者

这篇文章将为大家详细讲解有关使用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>
<head>
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>酒店分房表</title>
<stylemce_bogus="1"type="text/css">
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;
}
</style>
</head>
<body>
<divclass="A4">
<br/><br/>
<divalign="center">
<h2><strong>酒店信息和分房表</strong></h2>
<br/><br/>
</div>
<tablewidth="780"border="1"cellspacing="0"cellpadding="20">
<tr>
<tdwidth="140"align="center"><b>居住城市</b></td>
<tdwidth="120"align="center"><b>入住日期</b></td>
<tdwidth="120"align="center"><b>离店日期</b></td>
<tdwidth="200"align="center"><b>酒店名称</b></td>
<tdwidth="200"align="center"><b>地址</b></td>
</tr>
<tbody>
<tr>
<tdalign="center"></td>
<tdalign="center">2016-12-11</td>
<tdalign="center">2016-12-12</td>
<tdalign="center">性格里拉</td>
<tdalign="center">上海</td>
</tr>
</tbody>
</table>
<br/><br/>
<tablewidth="780"border="1"cellspacing="0"cellpadding="20">
<tr>
<tdwidth="140"align="center"><b>房间类型</b></td>
<tdwidth="120"align="center"><b>双床房</b></td>
</tr>
<tbody>
<tr>
<tdalign="center"><b>数量共计：5间</b></td>
<tdalign="center">5</td>
</tr>
</tbody>
</table>
<br/><br/>
<tableid="table_4"width="780"border="1"cellspacing="0"cellpadding="0">
<tr>
<tdwidth="50"align="center"><b>Room</b></td>
<tdwidth="50"align="center"><b>Adult</b></td>
<tdwidth="120"align="center"><b>中文名</b></td>
<tdwidth="200"align="center"><b>Name</b></td>
<tdwidth="50"align="center"><b>Sex</b></td>
<tdwidth="200"align="center"><b>RoomType</b></td>
</tr>
<tr>
<tdalign="center">1</td>
<tdalign="center">1</td>
<tdalign="center">熊哥1</td>
<tdalign="center">xsw</td>
<tdalign="center">女</td>
<tdalign="center">双床房1</td>
</tr>
<tr>
<tdalign="center">1</td>
<tdalign="center">2</td>
<tdalign="center">熊哥2</td>
<tdalign="center">xsw2222222</td>
<tdalign="center">男</td>
<tdalign="center">双床房1</td>
</tr>
<tr>
<tdalign="center">1</td>
<tdalign="center">3</td>
<tdalign="center">杰森.斯坦森</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房1</td>
</tr>
<tr>
<tdalign="center">2</td>
<tdalign="center">4</td>
<tdalign="center">李锡龄</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房2</td>
</tr>
<tr>
<tdalign="center">2</td>
<tdalign="center">5</td>
<tdalign="center">李孝利</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房2</td>
</tr>
<tr>
<tdalign="center">2</td>
<tdalign="center">6</td>
<tdalign="center">刘德国</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房2</td>
</tr>
<tr>
<tdalign="center">3</td>
<tdalign="center">7</td>
<tdalign="center">杰森.四米</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房3</td>
</tr>
<tr>
<tdalign="center">3</td>
<tdalign="center">8</td>
<tdalign="center">凯威.斯坦森</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房3</td>
</tr>
<tr>
<tdalign="center">3</td>
<tdalign="center">9</td>
<tdalign="center">杰森史蒂文</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房3</td>
</tr>
<tr>
<tdalign="center">4</td>
<tdalign="center">10</td>
<tdalign="center">5</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房4</td>
</tr>
<tr>
<tdalign="center">4</td>
<tdalign="center">11</td>
<tdalign="center">3</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房4</td>
</tr>
<tr>
<tdalign="center">4</td>
<tdalign="center">12</td>
<tdalign="center">1</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房4</td>
</tr>
<tr>
<tdalign="center">4</td>
<tdalign="center">13</td>
<tdalign="center">杰森.托马鞍山</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房4</td>
</tr>
<tr>
<tdalign="center">5</td>
<tdalign="center">14</td>
<tdalign="center">孙露</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房5</td>
</tr>
<tr>
<tdalign="center">5</td>
<tdalign="center">15</td>
<tdalign="center">李红梅</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房5</td>
</tr>
<tr>
<tdalign="center">5</td>
<tdalign="center">16</td>
<tdalign="center">卓越杀</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房5</td>
</tr>
<tr>
<tdalign="center">5</td>
<tdalign="center">17</td>
<tdalign="center">4</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房5</td>
</tr>
<tr>
<tdalign="center">5</td>
<tdalign="center">18</td>
<tdalign="center">12</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房5</td>
</tr>
<tr>
<tdalign="center">5</td>
<tdalign="center">19</td>
<tdalign="center">16</td>
<tdalign="center">JasonStatham</td>
<tdalign="center">男</td>
<tdalign="center">双床房5</td>
</tr>
</table>
<br/><br/>
</div>
</body>
<scripttype="text/javascript">
/**
*操作表格合并单元格行
*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);
$('#table_4').mergeCell({
cols:[0,5]
});
</script>
</html>

运行结果：