JavaScript合併表格中的內容相同的單元格

admin發表於2018-06-06
JavaScript

表格中很可能會出現重複的內容，有時候如果將這些重複的內容合併可能可讀性更強。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload = function(){ 
  var tab = document.getElementById("tab"); 
  var col =0; 
   
  megercell(tab, col); 
  megercell1(tab, col+1); 
}
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; 
        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>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td rowspan="0">張三 </td>
    <td>男 </td>
    <td>22 </td>
    <td>數學 </td>
    <td>90 </td>
  </tr>
  <tr>
    <td rowspan="0">張三 </td>
    <td>男 </td>
    <td>22 </td>
    <td>數學 </td>
    <td>90 </td>
  </tr>
  <tr>
    <td rowspan="0">張三 </td>
    <td>女 </td>
    <td>22 </td>
    <td>語文 </td>
    <td>70 </td>
  </tr>
  <tr>
    <td rowspan="0">張三 </td>
    <td>女 </td>
    <td>22 </td>
    <td>英語 </td>
    <td>60 </td>
  </tr>
  <tr>
    <td rowspan="0">李四 </td>
    <td>女 </td>
    <td>22 </td>
    <td>數學 </td>
    <td>60 </td>
  </tr>
  <tr>
    <td rowspan="0">李四 </td>
    <td>女 </td>
    <td>19 </td>
    <td>語文 </td>
    <td>60 </td>
  </tr>
  <tr>
    <td rowspan="0">王五 </td>
    <td>男 </td>
    <td>19 </td>
    <td>英語 </td>
    <td>60 </td>
  </tr>
</table>
</body>
</html>

相關文章