选择tr时如何排除第一个td？ CSS, jQuery答案

【问题标题】：How to exclude the first td when selecting a tr? CSS, JQuery选择tr时如何排除第一个td？ CSS, jQuery
【发布时间】：2018-11-16 07:47:21
【问题描述】：

我有这个脚本可以在点击时将background-color 更改为表格的tr：

<script>
  $('#reviews').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
  })
</script>

它工作正常。但是，我想排除tr 的第一个td。因此，当用户单击第一个 td 时，什么也没有发生。如何排除？

试过这个：

<script>
  $('#reviews').on('click', 'tbody tr:not(:first-of-type)', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
  })
</script>

但是当点击第一个td时，它仍然会突出显示整行。

【问题讨论】：

在此回答stackoverflow.com/questions/8977816/…
谢谢。但我试过了，同样的问题。
该答案专门针对 tds。您的委托子选择器以 trs 为目标。所以他们在这方面是不同的。

标签： javascript jquery html css vue.js

【解决方案1】：

您排除每行的第一个 tr 而不是 td。如果我正确理解你的目标，它应该是这样的：

  $('#reviews').on('click', 'tbody tr td:not( :first-of-type )', function(event) {
    $(this).parent().addClass('highlight').siblings().removeClass('highlight');
  })

Demo link

【讨论】：

【解决方案2】：

您正在尝试排除第一个 tr，但提到您希望排除第一个 td。

这样试试

$('#reviews').on('click', 'tbody > tr', function(event) {
    $(this).parent().find('td:not(:first-of-type)').addClass('highlight');
    $('table#reviews tr > td:not(:first-of-type).highlight').removeClass('highlight');
})

【讨论】：