Question

我正在尝试选择 tbody 中的所有<tr>元素，并通过jquery附加点击事件，但我无法选择正确的元素。

这是我的代码：

    <div id="wrapper" cellpadding="0" cellspacing="0" border="0">
        <table>
          <tbody>
           <tr id="row_2">
           <tr id="row_3">
           <tr id="row_4">

...

我尝试选择所有类似的东西：

 $('#wrapper tr').mousedown(function(event) {

and 

$('#wrapper > tr').mousedown(function(event) {

但它根本不绑定click事件。

Answer 1

使用.find()方法。获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

 $('#wrapper').find('tr')

Answer 2

它看起来像无效的HTML。使用这样的正确标记：

<div id="wrapper">
    <table>
        <tbody>
            <tr>
                <td>...</td>
            </tr>           
        </tbody>
    </table>
</div>

现在绑定点击事件。

$('#wrapper tr').mousedown(function(event) {
    //do something...
});

Answer 3

find方法的别名是向选择器添加第二个参数：$('tr', '#wrapper')。
如果实际代码中没有table标记，可以添加{{1}}标记。

Answer 4

您已经为每一行提供了id属性，因此您可以使用jquery轻松访问每一行。

Answer 5

你的选择器似乎没问题。也许你应该使用.click而不是.mousedown 您是否将事件绑定放在文档加载函数中？此外，我认为你没有表格元素很奇怪。但那不应该是问题。

如果您需要我们更好地了解它，请创建一个jsfiddle。

Answer 6

试试这个：

$('#wrapper').find('tr').mousedown(function(event) {

Answer 7

您可以执行 each 但必须指定表或元素

$('#clk').on('click', function(){
   let trs="";
   $("#wrapper #table2 tbody tr").each(function(i){
       trs+=this.innerHTML;
   });
   alert(trs)
})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" cellpadding="0" cellspacing="0" border="0">
<table id="table1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table> 
<table id="table2">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>March</td>
      <td>$800</td>
    </tr>
    <tr>
      <td>May</td>
      <td>$180</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table> 
</div>

<button type="button" id="clk">Clickme</button>

如何在具有给定id的特定div中选择表行元素

7 个答案: