DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js對table的td進行相同內容合並示例詳解
js對table的td進行相同內容合並示例詳解
編輯:JavaScript綜合知識     

 正如標題所言如何對table的td進行相同內容合並,下面為大家詳細介紹下使用js是如何做到的,感興趣的朋友不要錯過

代碼如下: function hb(){  var tab = document.getElementById("subtable");  var maxCol = 3, val, count, start;  var ys="";  for(var col = maxCol-1; col >= 0 ; 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){  //合並  start = i - count;  if(ys=="#00FFFF"){  ys="#EEEE00";  }else{  ys="#00FFFF";  }  tab.rows[start].cells[col].rowSpan = count;  tab.rows[start].cells[1].style.backgroundColor=ys;//改變顏色  // ys="#EEEE00";  // tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改變顏色綠色  for(var j=start+1; j<i; j++){ //  tab.rows[j].cells[col].style.display = "none";  tab.rows[j].removeChild(tab.rows[j].cells[col]);  }  count = 1;  }  val = tab.rows[i].cells[col].innerHTML;  }  }    if(count > 1 ){ //合並,最後幾行相同的情況下  start = i - count;  tab.rows[start].cells[col].rowSpan = count;  for(var j=start+1; j<i; j++) {  tab.rows[j].removeChild(tab.rows[j].cells[col]);  }  }  }  }   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved