使用 jQuery 隐藏带有 colspan 和 rowspan 的复杂列

Question

我正在构建一个包含很多 colspan 和 rowspan td 的或多或少的复杂表。现在我想在那些粉红色的列上创建一个 onclick 事件。因此，只要您单击其中一个具有 collapse 类的 + 列，我就想隐藏列。例如，当我点击第一个+ 时，我想隐藏整个First driver 列，包括Driver Name、first-driver-01 em>、驱动程序ID等

nth-child(x) 并没有真正帮助，因为它不会忽略 col- 和 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 浏览器对标签是这样的：

Answer 1

我会使用 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

我希望这会有所帮助， 祝你好运