Js control table merge concrete implementation

  • 2020-03-30 02:04:44
  • OfStack

 
<!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=gbk" /> 
<title> Headless document  </title> 
</head> 

<body> 
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> 
<tr> 
<td rowspan="0"> Zhang SAN  </td> 
<td> male  </td> 
<td>22 </td> 
<td> mathematics  </td> 
<td>90 </td> 
</tr> 
<tr> 
<td rowspan="0"> Zhang SAN  </td> 
<td> male  </td> 
<td>22 </td> 
<td> mathematics  </td> 
<td>90 </td> 
</tr> 
<tr> 
<td rowspan="0"> Zhang SAN  </td> 
<td> female  </td> 
<td>22 </td> 
<td> Chinese language and literature  </td> 
<td>70 </td> 
</tr> 
<tr> 
<td rowspan="0"> Zhang SAN  </td> 
<td> female  </td> 
<td>22 </td> 
<td> English  </td> 
<td>60 </td> 
</tr> 
<tr> 
<td rowspan="0"> Li si  </td> 
<td> female  </td> 
<td>22 </td> 
<td> mathematics  </td> 
<td>60 </td> 
</tr> 
<tr> 
<td rowspan="0"> Li si  </td> 
<td> female  </td> 
<td>19 </td> 
<td> Chinese language and literature  </td> 
<td>60 </td> 
</tr> 
<tr> 
<td rowspan="0"> Cathy  </td> 
<td> male  </td> 
<td>19 </td> 
<td> English  </td> 
<td>60 </td> 
</tr> 
</table> 

<script type="text/javascript"> 
window.onload = function(){ 
var tab = document.getElementById("tab"); 
var col =0; 

megercell(tab, col); 

megercell1(tab, col+1); 

for(var i=0; i<tab.rows.length; i++){ 
// alert(tab.rows[i].cells[0].getAttribute("rowspan")); 
} 
}; 


function megercell(tab, col){ 
count = 1; 
val = ""; 
for(var i=0; i<tab.rows.length; i++){ 
if(val == tab.rows[i].cells[col].innerHTML){ 
count++; 
}else{ 
if(count > 1){ 
from = i - count; 

tab.rows[from].cells[col].rowSpan = count; 
for(var j=from+1; j<i; j++){ 
tab.rows[j].cells[col].style.display = "none"; 
} 
count = 1; 
} 
val = tab.rows[i].cells[col].innerHTML; 
} 
} 
} 

function megercell1(tab, col){ 
count = 1; 
val = ""; 
var rowspan = 0; 
for(var i=0; i<tab.rows.length;){ 
rowspan = parseInt(tab.rows[i].cells[0].getAttribute("rowspan")); 

if(rowspan) 
{ 
for(var n = 0; n < rowspan; n++) 
{ 
if(val == tab.rows[i].cells[col].innerHTML){ 
count++; 
}else{ 
if(count > 1){ 
from = i - count; 
tab.rows[from].cells[col].rowSpan = count; 
for(var j=from+1; j<i; j++){ 
tab.rows[j].cells[col].style.display = "none"; 
} 
count = 1; 
} 
val = tab.rows[i].cells[col].innerHTML; 
} 
i++; 
} 
if(count > 1) 
{ 
from = i - count; 

alert(from +" "+ i +" "+ count); 
tab.rows[from].cells[col].rowSpan = count; 
for(var j=from+1; j<i; j++){ 
tab.rows[j].cells[col].style.display = "none"; 
} 
} 
count = 1; 
val = ""; 
} 
else 
{ 
i++; 
} 
} 
} 

</script> 
</body> 
</html> 

Related articles: