JS 合并table的列

疯狂嘻哈猴 2012-04-18 07:48:33

问题描述如下：
table：
AAA AAA BBB BBB BBB CCC CCC CCC DDD DDD
10 10 20 15 10 30 15 5 10 15
abc b c d e e f d f f

目标：
AAA BBB CCC DDD
40 45 50 25
abc b c d e e f d f f

描述：
第一行名字相同的列合并
第二行：根据第一行的合并第二行的数字相加并合并
注：1.第三行和前两行无关，不合并
2.第一行相同的列的个数不定

麻烦问一下，这个能用JS做吗？？

...全文

178 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

疯狂嘻哈猴 2012-04-18

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



<html>

<head>

<title>Untitled</title>

<script   language="JavaScript"> 

	function unitTable() {

	 

	 var tb = document.getElementById("tbName");

	 var i=0;

	 var j=0;

	 var rowCount = tb.rows.length;  // 行数

	 var   colCount=tb.rows[0].cells.length; //   列数  

	 alert(colCount);

	 //   为每个单元格命名  

	  for   (i=0;i<rowCount;i++){  

		  for   (j=0;j<colCount;j++){  

		  	tb.rows[i].cells[j].id="tb__"   +   i.toString()   +   "_"   +   j.toString();  

		  }  

	  }

	  

  	obj1=document.getElementById("tb__0_0");

  	obj4=document.getElementById("tb__1_0");

  	var count = parseFloat(obj4.innerHTML);

  	//alert("第一次：" + count);

  	for(j=1;j<colCount;j++){  

	  obj2=document.getElementById("tb__0_"+j.toString());

	  if   (obj1.innerHTML == obj2.innerHTML){ 

	  	obj3=document.getElementById("tb__1_"+j.toString());

	  	count += parseFloat(obj3.innerHTML);

	  		//alert("中间过程" + count);

		  obj1.colSpan++;  

		  obj2.parentNode.removeChild(obj2);

		  obj4.colSpan++;

		  obj3.parentNode.removeChild(obj3);

		  if(j == (colCount -1)) {

		  	obj4.innerHTML = count;

		  }

	  } else {

	  	 obj1=document.getElementById("tb__0_"+j.toString());

	  	 obj4.innerHTML = count;

	  	 obj4=document.getElementById("tb__1_"+j.toString());

	  	 count = parseFloat(obj4.innerHTML);

	  }   

    }  

   }

	 

</script> 

</head>



<body>

<table border="1px" name="tb2" id="tb2">

	<tr>

		<td>

			aaa

		</td>

	</tr

</table>

<table border="1" name="tbName" id="tbName">

	<tr>

		<td>AAA</td>

		<td>AAA</td>

		<td>AAA</td>

		<td>BBB</td>

		<td>BBB</td>

		<td>CCC</td>

		<td>CCC</td>

		<td>CCC</td>

		<td>CCC</td>

	</tr>

	<tr>

		<td>10</td>

		<td>10</td>

		<td>15</td>

		<td>25</td>

		<td>20</td>

		<td>5</td>

		<td>5</td>

		<td>5</td>

		<td>5</td>

	</tr>

	<tr>

		<td>王</td>

		<td>王</td>

		<td>王</td>

		<td>王</td>

		<td>王</td>

		<td>王</td>

		<td>王</td>

		<td>王</td>

		<td>王</td>

	</tr>

</table>

<input type="button" onclick="unitTable()" value="YES"/>

</body>



</html>