Beispielcode für das Zusammenführen von Tabellenzellen in Javascript

Beispielcode für das Zusammenführen von Tabellenzellen in Javascript_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:22:21

Original

1299 Leute haben es durchsucht

Dieser Artikel stellt Ihnen ein Codebeispiel aus dem Internet vor, das Zellen zusammenführen kann. Ich hoffe, es kann Freunden helfen, die es brauchen.
Das Codebeispiel lautet wie folgt:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>表格单元格合并代码</title>
<script type="text/javascript"> 
function autoRowSpan(tb,row,col){ 
 var lastValue=""; 
 var value=""; 
 var pos=1; 
 for(var i=row;i<tb.rows.length;i++){ 
 value=tb.rows[i].cells[col].innerText; 
 if(lastValue==value){ 
  tb.rows[i].deleteCell(col); 
  tb.rows[i-pos].cells[col].rowSpan=tb.rows[i-pos].cells[col].rowSpan+1; 
  pos++; 
 }
 else{ 
  lastValue=value; 
  pos=1; 
 } 
 } 
} 
window.onload=function(){
 var tb=document.getElementById("tb");
 autoRowSpan(tb,0,0)
}
</script>
</head>
<body>
<table id="tb" border="1">
 <thead>
 <tr >
  <td>国家</td>
  <td>地区</td>
 </tr>
 </thead>
 <tr>
 <td>中国</td>
 <td>河南</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>四川</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>北京</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>纽约</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>洛杉矶</td>
 </tr>
 <tr>
 <td>英国</td>
 <td>伦敦</td>
 </tr>
</table>
</body>
</html>

Nach dem Login kopieren

Ich teile einen Absatz mit Ihnen:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>合并表格</title> 
<script> 
/////////////////////////////////////////////// 
//功能：合并表格 
//参数：tb－需要合并的表格ID 
//参数：colLength－－需要对前几列进行合并，比如， 
//想合并前两列，后面的数据列忽略合并，colLength应为2 
//缺省表示对全部列合并 
//data:2011.11.06 
/////////////////////////////////////////////// 
function uniteTable(tb,colLength){ 
//检查表格是否规整 
if(!checkTable(tb)) return; 
var i=0; 
var j=0; 
var rowCount=tb.rows.length; //行数 
var colCount=tb.rows[0].cells.length; //列数 
var obj1=null; 
var obj2=null; 
//为每个单元格命名 
for(i=0;i<rowCount;i++){ 
for(j=0;j<colCount;j++){ 
tb.rows[i].cells[j].id="tb__" + i.toString() + "_" + j.toString(); 
} 
} 
//逐列检查合并 
for(i=0;i<colCount;i++){ 
if(i==colLength) return; 
obj1=document.getElementById("tb__0_"+i.toString()) 
for(j=1;j<rowCount;j++){ 
obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString()); 
if(obj1.innerText==obj2.innerText){ 
obj1.rowSpan++; 
obj2.parentNode.removeChild(obj2); 
}else{ 
obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString()); 
} 
} 
} 
} 

///////////////////////////////////////// 
//功能：检查表格是否规整 
//参数：tb－－需要检查的表格ID 
//data: 2011.11.06
///////////////////////////////////////// 
function checkTable(tb){ 
if(tb.rows.length==0) return false; 
if(tb.rows[0].cells.length==0) return false; 
for(var i=0;i<tb.rows.length;i++){ 
if(tb.rows[0].cells.length!=tb.rows[i].cells.length) return false; 
} 
return true; 
} 
</script> 
</head> 
<body> 
<table width="400" border="1" id="table1"> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>200</td>
<td>1</td> 
</tr> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>300</td> 
<td>2</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>100</td> 
<td>200</td> 
<td>3</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>300</td> 
<td>230</td> 
<td>4</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>320</td> 
<td>230</td> 
<td>5</td> 
</tr> 
</table> 
<br><input type="button" value="合并表格" onClick="uniteTable(table1,4)"> 
</body> 
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.