jquery - 使用 jQuery Sibling 在 HTML 表格中查找顶部

Question

我有一个包含许多隐藏列的 HTML 表格。您可以将列视为 3 组。前两个是隐藏的，第三个是可见的。当您将鼠标悬停在第 3 个上时，3 个一组中的前 2 个也变得可见。我想弄清楚如何选择前 2 <th>在发生鼠标悬停的列中，因此我可以使用 jQuery 更改 html 以添加 colspan='3'到两个<th>以便它们跨越“集合”的所有 3 列。

例如:将鼠标悬停在第一个黄色列的任何部分上会使在该列之前隐藏的 2 列现在可见。 “1000017”和“薯片”将是需要选择的，这样我就可以将它们的列跨度更改为 3，以便它们再次正确覆盖列。不过，我当前的代码无法正常工作，而是选择了整个“元素名称”行。

我的问题是:如何修复我的 this.siblings jQuery 行，使其只选择适当的 <th>而不是整行。

请看下面的片段:

$('.yellowbr').hover(function() {
  var sel = $(this).index();
  $('tr').each(function(){
    $('td',this).slice(sel-3,sel-1).toggleClass('hidetd');
    $(this).siblings().first().toggleClass('light');
  })
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}

.hidetd {
    display:none;  
}

.light {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th>100017</th>
    <th>100018</th>
    <th>100019</th>
    <th>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th><u>Potato chips</u>
    </th>
    <th><u>butterfingers</u>
    </th>
    <th><u>Flat Pretzels</u>
    </th>
    <th><u>Milk Chocolate</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>

如果没有隐藏任何列并且所有标题 span="3"都覆盖了正确的列，则所有内容如下所示。

.yellowbr {
  background-color: yellow;
}

table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
       
}

<table>
  <tr>
    <th>Item #</th>
    <th colspan="3">100017</th>
    <th colspan="3">100018</th>
    <th colspan="3">100019</th>
    <th colspan="3">100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th colspan="3"><u>Potato chips</u></th>
    <th colspan="3"><u>butterfingers</u></th>
    <th colspan="3"><u>Flat Pretzels</u></th>
    <th colspan="3"><u>Milk Chocolate</u></th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>

Answer 1

这是您要找的吗？

$('.yellowbr').hover(function() {
  var sel = $(this).index();
  $('tr').each(function() {
    $('th', this).slice(sel / 3, sel / 3 + 1).attr('colspan', 3);
    $('th', this).filter(function(i) {
      return i !== sel / 3;
    }).attr('colspan', 1);

    var cellsToHightlight = $('td', this).slice(sel - 3, sel - 1);
    for (var i = 0; i < cellsToHightlight.length; i += 1) {
      var cell = $(cellsToHightlight[i]);
      if (cell.hasClass('hidetd')) {
        cell.removeClass('hidetd');
      }
    }

    $('td', this).filter(function(i, el) {
      return (i < sel - 3 || i > sel - 1) && (i + 1) % 3 !== 0;
    }).addClass('hidetd');

    $(this).siblings().first().toggleClass('light');
  });
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}
.hidetd {
  display: none;
}
.light {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th>100017</th>
    <th>100018</th>
    <th>100019</th>
    <th>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th><u>Potato chips</u>
    </th>
    <th><u>butterfingers</u>
    </th>
    <th><u>Flat Pretzels</u>
    </th>
    <th><u>Milk Chocolate</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>