如何选择具有给定 id 的特定 div 内的表格行元素答案

【问题标题】：How to select table row elements inside a particular div with a given id如何选择具有给定 id 的特定 div 内的表格行元素
【发布时间】：2013-12-23 20:45:00
【问题描述】：

我正在尝试选择 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">

...

我试着像这样选择所有的 tr：

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

and 

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

但它根本不绑定点击事件。

【问题讨论】：

这看起来像是无效的 HTML。

标签： jquery html css jquery-selectors

【解决方案1】：

你可以做一个 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>

【讨论】：

【解决方案2】：

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

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

现在绑定点击事件。

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

find 方法的别名是向选择器添加第二个参数：$('tr', '#wrapper')。
如果您的实际代码中不存在 table 标签，则可以添加它。

【讨论】：

【解决方案7】：

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

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

【讨论】：

$('#wrapper tr') 的这种不同形式有何不同？