使用jQuery

Question

我正在或多或少地构建一个包含大量 colspan 和 rowspan td的复杂表格。现在我想在那些粉色列上创建一个onclick事件。因此，只要您点击其中一个+列中的某个类collapse，我就想隐藏列。例如，当我单击第一个+时，我想隐藏整个第一个驱动程序列，包括驱动程序名称， first-driver-01 ，驱动程序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

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