Question

我有一个通过SQL和PHP生成的HTML表。 onClick级别有一个JS <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 - 或者移动那些＆＃34;表格＆＃34;从表中，把它放在上面，然后使用$('table').find('tbody').find('td:not(:nth-child(-n+3))')更好的方法是简单地将类添加到你想要的东西或你不想要的东西。

不推荐使用Unbind，因此我在这里使用了off和on。

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

在稍微理解了你的问题之后，我只是使用了tbody并跳过了所有有输入的td - 它似乎是你真正想要的，并且如果你改变你的表以获得更多的复选框，这将使它工作。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

要附加到表示例：可能必须将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);
});

tr：not（：first-child）由于某种原因被忽略

1 个答案: