<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
}
#textTab {
width: 60%;
border-collapse: collapse;
border-spacing: 0;
background: #F0F0F0;
}
#textTab tr td{
border: 1px #ccc solid;
width: 20%;
}
</style>
<script type="text/javascript" src="./jquery-2.0.3.min.js"></script>
</head>
<body>
<div>
<table id="textTab">
<caption>测试js合并相邻表格的相同数据</caption>
<thead>
<tr>
<td>qqq</td>
<td>www</td>
<td>eee</td>
<td>rrr</td>
<td>bbb</td>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>111</td>
<td>2220</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>111</td>
<td>2220</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>111</td>
<td>2220</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>111</td>
<td>2220</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>111</td>
<td>2220</td>
<td>3330</td>
<td>4440</td>
<td>5550</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
<tr>
<td>1112</td>
<td>2220</td>
<td>3331</td>
<td>4441</td>
<td>5551</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
merge("textTab",[0,1]);
});
/**
* @param tabId 表id
* @param colIndexArr 格式为数组 需要合并的列的列下标（从0开始）
*/
function merge(tabId,colIndexArr){
var tbody = $("#"+tabId).find("tbody");
if(undefined != tbody){
var temp = {},objTemp={},last;
var trLength = tbody.find("tr").length;//tr的总行数
tbody.find("tr").each(function(index,elemt){
if(undefined != colIndexArr && colIndexArr.length > 0){
for(var i = 0; i < colIndexArr.length; i++) {
var tdelemt = $(elemt).find("td:eq("+colIndexArr[i]+")");
var colVal = tdelemt.text();
var column = colIndexArr[i];
if(undefined == temp[colVal]){
var last = temp[column];
if(last != undefined){
var eleArr = objTemp[last];
if(null != eleArr){
for(var j=0; j<eleArr.length; j++){
if(j == 0){
$(eleArr[j]).attr("rowspan",temp[last]);
}else{
eleArr[j].remove();
}
}
}
//清空缓存数据
deleteObj(temp,last);
deleteObj(objTemp,last);
}
temp[colVal] = 1;
temp[column] = colVal;
objTemp[colVal] = [tdelemt];
}else{
temp[colVal] += 1;
objTemp[colVal].push(tdelemt);
}
}
}
//处理最后一行
if(index == (trLength-1)){
//alert("最后一行数据");
for(var k = 0; k<colIndexArr.length; k++) {
var last = temp[colIndexArr[k]];
if(last != undefined){
var eleArr = objTemp[last];
if(null != eleArr){
for(var j=0; j<eleArr.length; j++){
if(j == 0){
$(eleArr[j]).attr("rowspan",temp[last]);
}else{
eleArr[j].remove();
}
}
}
}
}
//清空缓存数据
deleteObj(temp,last);
deleteObj(objTemp,last);
}
});
//showObject(temp);
//showObject(objTemp);
}
}
//打印显示object
function showObject(obj){
console.log(JSON.stringify(obj));
/*for(var key in obj){
console.log("key : "+key+",value : "+obj[key]);
}*/
};
//根据键值删除节点数据
function deleteObj(obj,id){
delete obj[id];
}
//却出两端空格
function myTrim(data){
return data.replace(/(^\s*)|(\s*$)/g,"");
}
</script>
</html>
