jquery 如何在悬停时只突出显示表中除最后一列以外的行?

tktrz96b  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(135)

我遇到的问题与这篇文章类似:HTML table how highlight row on hover except first column? .然而,这里的回复并不是我要找的效果。我正在寻找两个第一2列亮起时,我悬停在任何一个,并为第3列不亮起任何东西,当我悬停在它。

ulmd4ohb

ulmd4ohb1#

请不要使用任何javascriptjquery,两个css规则就足够了。
选择所有tr:hover,然后使用td:not(:last-of-type)排除最后一列。
然后禁用最后一列上的所有pointer-events,以禁用触发悬停的pointer-events

table>tbody>tr:hover td:not(:last-of-type) {
  background-color: red;
}

table>tbody>tr>td:last-of-type {
  pointer-events: none;
}

个字符

hwamh0ep

hwamh0ep2#

如果你需要鼠标事件在第三列,这不能没有JS。
第三列应该被禁用的问题。可以用pointer-events:none来实现。但如果我们需要鼠标事件在第3列这里的解决方案:
你可以使用nth-child CSS伪类和一些JavaScript:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

'mousemove mouseleave'.split(' ').forEach(name =>
  $table.addEventListener(name, syncHover)
);

function syncHover(e) {

  $table.querySelector('tr.hover')?.classList.remove('hover');

  const $td = e.target.closest('td');

  $td && [...$td.parentElement.children].indexOf($td) < 2 &&
    $td.parentElement.classList.add('hover');

}
table tr.hover>td:nth-child(-n + 2) {
  background: lightgray;
  cursor: pointer;
}

table td {
  padding: 5px 10px;
}

table {
  border-collapse: collapse;
  background: #eee;
}
<table id="$table">
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
  </tr>
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
  </tr>
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
  </tr>
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
  </tr>
</table>

相关问题