顯示，隱藏和組列在jQuery的

Question

我有一個表，我需要組列。如何用HTML來判斷列是否屬於一起？我一直在尋找COLGROUP，但我不知道這是我需要什麼。

我需要建立與jquery其作品在某種程度上像微軟Excel的功能組的功能，所以我可以隱藏未使用的列，只顯示相關列，但也表現出其他列的選項。

Answer 1

看看在jqGrid的demos。它有分組列的功能，我相信（至少對於舊版本）還隱藏它們。

Answer 2

你可以嘗試這樣的事情......

HTML

<table> 

<tr> 
    <td> 
     First Name 
    </td> 
    <td> 
     Middle Initial 
    </td> 
    <td> 
     Last Name 
    </td> 
</tr> 
<tr> 
    <td> 
     John 
    </td> 
    <td> 
     C 
    </td> 
    <td> 
     Doe 
    </td> 
</tr> 
<tr> 
    <td> 
     Jim 
    </td> 
    <td> 
     D 
    </td> 
    <td> 
     Doe 
    </td> 
</tr> 
<tr> 
    <td> 
     Jane 
    </td> 
    <td> 
     E 
    </td> 
    <td> 
     Doe 
    </td> 
</tr> 
</table> 
<a onclick="javascript:hideColumn('first')">Hide First Name</a> 
<a onclick="javascript:hideColumn('middle')">Hide Middle Initial</a> 
<a onclick="javascript:hideColumn('last')">Hide Last Name</a> 

的JavaScript

<script type="text/javascript"> 
function hideColumn(column) { 
    var row = []; 
    var dataCell = []; 
    switch (column) { 
     case 'first': { 
      var a = document.getElementsByTagName('a'); 
      if(a[0].innerHTML == "Hide First Name") 
      { 
       row = document.getElementsByTagName('tr'); 
       for(var i = 0; i < row.length; i++){ 
        dataCell = row[i].getElementsByTagName('td'); 
        dataCell[0].style.visibility = "hidden";  
       } 
       a[0].innerHTML = "Show First Name"; 
      } 
      else 
      { 
       row = document.getElementsByTagName('tr'); 
       for(var i = 0; i < row.length; i++){ 
        dataCell = row[i].getElementsByTagName('td'); 
        dataCell[0].style.visibility = "visible"; 
       } 
       a[0].innerHTML = "Hide First Name"; 
      } 
      break; 
     } 
     case 'middle': { 
      var a = document.getElementsByTagName('a'); 
      if(a[1].innerHTML == "Hide Middle Initial") 
      { 
       row = document.getElementsByTagName('tr'); 
       for(var i = 0; i < row.length; i++){ 
        dataCell = row[i].getElementsByTagName('td'); 
        dataCell[1].style.visibility = "hidden";  
       } 
       a[1].innerHTML = "Show Middle Initial"; 
      } 
      else 
      { 
       row = document.getElementsByTagName('tr'); 
       for(var i = 0; i < row.length; i++){ 
        dataCell = row[i].getElementsByTagName('td'); 
        dataCell[1].style.visibility = "visible"; 
       } 
       a[1].innerHTML = "Hide Middle Initial"; 
      } 
      break; 
     } 
     case 'last': { 
      var a = document.getElementsByTagName('a'); 
      if(a[2].innerHTML == "Hide Last Name") 
      { 
       row = document.getElementsByTagName('tr'); 
       for(var i = 0; i < row.length; i++){ 
        dataCell = row[i].getElementsByTagName('td'); 
        dataCell[2].style.visibility = "hidden";  
       } 
       a[2].innerHTML = "Show Last Name"; 
      } 
      else 
      { 
       row = document.getElementsByTagName('tr'); 
       for(var i = 0; i < row.length; i++){ 
        dataCell = row[i].getElementsByTagName('td'); 
        dataCell[2].style.visibility = "visible"; 
       } 
       a[2].innerHTML = "Hide Last Name"; 
      } 
      break; 
     } 
    } 
} 
</script> 

既然你想通過他們在列組項目

，他們永遠是在同一個地方排。這可能是一種更好/更少硬編碼的方式。但希望這個例子會有所幫助。