求通用合并行的js
能够通用合并行中相同值的,表格样式是动态的,即只知道最大列数为几,例如只在页面中红色字体区域合并相同值,要合并的部分最大列为3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>
<body>
<table width= "582 " border= "1 ">
<tr>
<td width= "49 "> test01 </td>
<td width= "39 "> test11 </td>
<td width= "53 "> test12 </td>
<td width= "53 " rowspan= "3 "> a </td>
<td colspan= "6 "> b </td>
</tr>
<tr>
<td> test10 </td>
<td> test12 </td>
<td> test13 </td>
<td colspan= "3 "> </td>
<td width= "53 " rowspan= "2 "> 2 </td>
<td width= "53 " rowspan= "2 "> 4 </td>
<td width= "59 " rowspan= "2 "> 5 </td>
</tr>
<tr>
<td> test20 </td>
<td> test21 </td>
<td> test23 </td>
<td width= "53 "> 1 </td>
<td width= "53 "> 2 </td>
<td width= "53 "> 3 </td>
</tr>
<tr>
<td rowspan= "12 "> <span class= "STYLE1 "> 资产相关费 <br />
用 </span> </td>
<td rowspan= "2 "> <span class= "STYLE1 "> 折旧 </span> </td>
<td> <span class= "STYLE1 "> 1 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 2 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan= "2 "> <span class= "STYLE1 "> 维修 </span> </td>
<td> <span class= "STYLE1 "> 1 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 2 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan= "2 "> <span class= "STYLE1 "> 低值易耗品 </span> </td>
<td> <span class= "STYLE1 "> 1 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 2 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 物业费 </span> </td>
<td> <span class= "STYLE1 "> 物业费 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 车辆费用 </span> </td>
<td> <span class= "STYLE1 "> 车辆费用 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 水电能源费 </span> </td>
<td> <span class= "STYLE1 "> 水电能源费 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 保险费 </span> </td>
<td> <span class= "STYLE1 "> 保险费 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 其他 </span> </td>
<td> <span class= "STYLE1 "> 其他 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 小计 </span> </td>
<td> <span class= "STYLE1 "> 小计 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 合计 </span> </td>
<td> <span class= "STYLE1 "> 合计 </span> </td>
<td> <span class= "STYLE1 "> 合计 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> a </span> </td>
<td> <span class= "STYLE1 "> b </span> </td>
<td> <span class= "STYLE1 "> c </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 费用 </span> </td>
<td> <span class= "STYLE1 "> 出差费 </span> </td>
<td> <span class= "STYLE1 "> 出差费 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
[解决办法]
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 合并表格 </title>
<script>
//合并行
function marage(){
var trObjs=document.getElementsByTagName( "tr ");
var tr_len=trObjs.length;
for(var i=tr_len-1;i> =0;i--){
var tdObjs=trObjs[i].childNodes;
var td_len=tdObjs.length;
var col_size=0;
for(var j=td_len-1;j> =0;j--){
if(j> 0){
var td_value=tdObjs[j].innerText;
var td_row=tdObjs[j].rowSpan;
var next_col_value=tdObjs[j-1].innerText;
var next_td_row=tdObjs[j-1].rowSpan;
if(td_value==next_col_value&&td_row==next_td_row){
tdObjs[j-1].colSpan=tdObjs[j].colSpan+tdObjs[j-1].colSpan;
tdObjs[j].removeNode();
}else{
col_size+=tdObjs[j].colSpan;
}
}
}
}
}
</script>
</head>
<body>
<table width= "582 " border= "1 ">
<tr>
<td width= "49 "> test01 </td>
<td width= "39 "> test11 </td>
<td width= "53 "> test12 </td>
<td width= "53 " rowspan= "3 "> a </td>
<td colspan= "6 "> b </td>
</tr>
<tr>
<td> test10 </td>
<td> test12 </td>
<td> test13 </td>
<td colspan= "3 "> </td>
<td width= "53 " rowspan= "2 "> 2 </td>
<td width= "53 " rowspan= "2 "> 4 </td>
<td width= "59 " rowspan= "2 "> 5 </td>
</tr>
<tr>
<td> test20 </td>
<td> test21 </td>
<td> test23 </td>
<td width= "53 "> 1 </td>
<td width= "53 "> 2 </td>
<td width= "53 "> 3 </td>
</tr>
<tr>
<td rowspan= "12 "> <span class= "STYLE1 "> 资产相关费 <br />
用 </span> </td>
<td rowspan= "2 "> <span class= "STYLE1 "> 折旧 </span> </td>
<td> <span class= "STYLE1 "> 1 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 2 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan= "2 "> <span class= "STYLE1 "> 维修 </span> </td>
<td> <span class= "STYLE1 "> 1 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 2 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan= "2 "> <span class= "STYLE1 "> 低值易耗品 </span> </td>
<td> <span class= "STYLE1 "> 1 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 2 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 物业费 </span> </td>
<td> <span class= "STYLE1 "> 物业费 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 车辆费用 </span> </td>
<td> <span class= "STYLE1 "> 车辆费用 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 水电能源费 </span> </td>
<td> <span class= "STYLE1 "> 水电能源费 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 保险费 </span> </td>
<td> <span class= "STYLE1 "> 保险费 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 其他 </span> </td>
<td> <span class= "STYLE1 "> 其他 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 小计 </span> </td>
<td> <span class= "STYLE1 "> 小计 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 合计 </span> </td>
<td> <span class= "STYLE1 "> 合计 </span> </td>
<td> <span class= "STYLE1 "> 合计 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> a </span> </td>
<td> <span class= "STYLE1 "> b </span> </td>
<td> <span class= "STYLE1 "> c </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> <span class= "STYLE1 "> 费用 </span> </td>
<td> <span class= "STYLE1 "> 出差费 </span> </td>
<td> <span class= "STYLE1 "> 出差费 </span> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input type= "button " value= "合并行 " onClick= "marage( '1 ', '3 ') ">
</body>
</html>
