Javascript menggabungkan sel jadual contoh kemahiran code

Javascript menggabungkan sel jadual contoh kemahiran code_javascript

WBOY

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

asal

1300 orang telah melayarinya

Artikel ini memperkenalkan anda kepada contoh kod daripada Internet yang boleh menggabungkan sel Mari kongsikan dengan anda. Saya harap ia boleh membawa sedikit bantuan kepada rakan yang memerlukannya.
Contoh kod adalah seperti berikut:

<!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>

Salin selepas log masuk

Saya berkongsi perenggan dengan anda:

<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>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.