隱藏與合併單元格和行跨度複雜柱與jQuery

我建立或多或少複雜的表有很多合併單元格和行跨度td的的。現在我想在這些粉色欄目上創建一個onclick事件。因此，只要您點擊列中的其中一個collapse類，我想隱藏列。例如，當我點擊第一+，我想隱藏整個第一驅動列包括驅動程序名稱，第一驅動-01，驅動ID等隱藏與合併單元格和行跨度複雜柱與jQuery

nth-child(x)真的沒有幫助，因爲它不會忽略col- and rowspans。我試着組td的一個分離式標籤，就像這樣：

<tr> 
     <td rowspan="3">CIM</td> 
     <!-- First driver --> 
     <group class="first-driver-01"> 
      <td colspan="4">First driver</td> 
     </group> 
     <td rowspan="3" class="collapse">+</td> 
     <group class="second-driver-213"> 
      <td colspan="4">Second driver</td> 
     </group> 
     <td rowspan="3" class="collapse">+</td> 
    </tr>

不幸的是我的Chrome瀏覽器這樣做是爲了標籤：

來源

2016-04-26 Sylnois

您可以爲每個要隱藏的表格單元添加一個類。 – Blazemonger

@Blazemonger這就像我最後的出路，但它做到了！ – Sylnois

我會使用DIV的和CSS像這樣的東西，並將它們像桌子一樣造型。我不打算重新創建整個表格，但這是我使用較小的表格創建的一個示例，我會讓您獲得一些樂趣。

的Javascript

document.getElementById("clickme").onclick = function(){ 
     var divsToHide = document.getElementsByClassName("hide"); //divsToHide is an array 
    if(document.getElementById("clickme").innerHTML == "-"){ 
    for(var i = 0; i < divsToHide.length; i++){ 
     divsToHide[i].style.visibility = "hidden"; // or 
     divsToHide[i].style.display = "none"; // depending on what you're doing 
     } 
     document.getElementById("clickme").innerHTML = "+" 
    } 
    else { 
      for(var i = 0; i < divsToHide.length; i++){ 
      divsToHide[i].style.visibility = "visible"; // or 
      divsToHide[i].style.display = "table-cell"; // depending on what you're doing 
      } 
      document.getElementById("clickme").innerHTML = "-" 

     } 
};

HTML

<div class="table"> 
    <div class="row"> 
    <div class="cell header">Team</div> 
    <div class="cell header">Wins</div> 
    <div class="cell header">Losses</div> 
    <div class="cell header hide ">Pct</div> 
    </div> 
    <div class="row"> 
    <div class="cell">Bulls</div> 
    <div class="cell">29</div> 
    <div class="cell">18</div> 
    <div class="cell hide">.617</div> 
    </div> 
    <div class="row"> 
    <div class="cell">Pacers</div> 
    <div class="cell">28</div> 
    <div class="cell">19</div> 
    <div class="cell hide">.596</div> 
    </div> 
    <div class="row"> 
    <div class="cell"></div> 
    <div class="cell"></div> 
    <div class="cell"></div> 
    <div class="cell" id="clickme">-</div> 
    </div>

CSS

.table { 
    display:table; 
} 
.row { 
    display:table-row; 
} 
.cell { 
    display:table-cell; 
    padding:2px; 
} 
.header { 
    font-weight:bold; 
    text-align:center; 
}

Fiddle Here

我希望這有助於好運氣

來源

2016-04-26 21:57:49

謝謝你的回覆。我做了不同的事情，因爲表結構非常複雜。我只是給每個單元格添加了一個具有組標識的類。 – Sylnois

很高興看到你有它的工作，並沒有問題。如果它對你有幫助，請接受答案。 –

隱藏與合併單元格和行跨度複雜柱與jQuery

回答

相關問題