javascript - TR :not(:first-child) being ignored for some reason

Question

我有一个通过 SQL 和 PHP 生成的 HTML 表格。有一个JS onClick事件在 <table>等级。

我正在尝试设置它，以便我的第一行(<TH> 下方的第一行)和前三列不属于该事件。这些行/列是表单而不是事件数据的一部分。

我有以下脚本和 TD的被成功忽略，但我似乎无法删除 onClick第一个警报形式 TR不管我怎么修改代码。

其他一切都按预期 100% 工作。我知道这可能不是满足我需要的最好或最有效的方法，但这是我设法组合在一起的所有方法，到目前为止可以按预期工作。

$('table tr:not(:first-child) td:not(:nth-child(-n+3))')
  .unbind()
  .click(function(clickSpot){
       var clickID = $(this).closest('tr').find('td:eq(3)').text();
       alert(clickID);
})

Answer 1

您可能会考虑使用 thead 和 tbody，因为您似乎想在这里使用 tbody - 或者将这些“表单”从table，把它放在上面，然后使用 $('table').find('tbody').find('td:not(:nth-child(-n+3))')更好的方法可能是简单地向您想要或不想要的东西添加类。

Unbind 已被弃用，所以我在这里使用了 off 和 on。

例如，将类添加到您希望定位的表格行。

在稍微理解了您的问题之后，我只是使用了 tbody 并跳过了所有具有输入的 td - 这似乎是您真正想要的，并且如果您将表格更改为具有更多复选框，则可以实现此目的。

$('table').find('tbody')
   .on('click','td:not(:has("input"))',function(event){
      var clickID = $(this).closest('tr').find('td').eq(3).text();
      alert(clickID);
});

tr td {border: solid green 1px;}
tr.useme td {border:solid blue 1px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
      <th>Header content 3</th>
      <th>Header content N</th>
      <th>Header content N</th>
      <th>Header content N</th>
      <th>Header content N</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
      <td>Body content 3</td>
      <td>Body content N</td>
      <td>Body content N</td>
      <td>Body content N</td>
      <td>Body content N</td>
    </tr>
     <tr class='useme'>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
      <td>Body content 3</td>
      <td>Body content N</td>
      <td>Body content N</td>
      <td>Body content N</td>
      <td>Body content N</td>
   </tr>
     <tr class='useme'>
      <td><input type="checkbox" /></td>
      <td>Body content 2</td>
      <td><input type="checkbox" /></td>
      <td>Body content N</td>
      <td>Body content N</td>
      <td>Body content N</td>
      <td>Body content N</td>
    </tr>
  </tbody>
</table>

要附加到表格示例:可能必须更改 td 以针对特定的。重点是事件处理程序附加到此处的 tbody，添加行没有区别，它们仍然会获得事件。只要 tbody 保持原位，就无需在每次添加表格行时重新执行此操作。

$('table').find('tbody')
   .on('click','td',function(event){
      var clickID = $(this).closest('tr').find('td').eq(3).text();
      alert(clickID);
});

原文:

$('table').find('tbody')
   .find('tr.useme').find('td')
   .off('click').on('click',function(event){
      var clickID = $(this).closest('tr').find('td').eq(3).text();
      alert(clickID);
});