Question

我试图捕获表行的点击但是我想只捕获主表/主表行。如果行再次有表我想忽略它们。我正在寻找与.on（）一起使用的选择器，并且只选择主表行而不是嵌套表行。

要求：

表格包含动态行，因此我正在寻找.on()
解决方案选择器必须是通用的，我不想使用tr.odd或tr.even类限制

的jsfiddle： https://jsfiddle.net/bababalcksheep/8vpg6dp6/9/

JS：

$(document).ready(function() {
  //'tbody > tr:first:parent tr
  $('#example').on('click', 'tbody > tr', function(e) {
    console.log(this);
    //do something with row in master table
  });
});

HTML：

<table width="100%" cellspacing="0" class="display dataTable no-footer" id="example" role="grid" aria-describedby="example_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 84px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 124px;" aria-label="Position: activate to sort column ascending">Position</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 62px;" aria-label="Office: activate to sort column ascending">Office</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 37px;" aria-label="Extn.: activate to sort column ascending">Extn.</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 63px;" aria-label="Start date: activate to sort column ascending">Start date</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 56px;" aria-label="Salary: activate to sort column ascending">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>5407</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">Angelica Ramos</td>
      <td>Chief Executive Officer (CEO)</td>
      <td>London</td>
      <td>5797</td>
      <td>2009/10/09</td>
      <td>$1,200,000</td>
    </tr>
    <tr role="row" class="odd">
      <td colspan="6">
        <table style="width:100%">
          <tbody>
            <tr>
              <td>Jill</td>
              <td>Smith</td>
              <td>50</td>
            </tr>
            <tr>
              <td>Eve</td>
              <td>Jackson</td>
              <td>94</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

在您的选择器中添加一个起始>：

$('#example').on('click', '> tbody > tr:not(:has(>td>table))', function(e) {
    // ...
}

这样，只会选择表格的直接tbody个孩子。还使用:not(:has(>td>table))过滤掉包含嵌套表的行。

这是一个分叉的Fiddle。

Answer 2

您可以通过停止事件传播来实现。将id或类分配给内部表并在那里停止事件传播。

 <tr role="row" class="odd">
  <td colspan="6">
    <table style="width:100%" id="innerTable">
      <tbody>
        <tr>
        .....

所以在当前代码之后写下另一个选择器并停止传播，如：

$(document).ready(function() {
//'tbody > tr:first:parent tr
$('#example').on('click', 'tbody > tr', function(e) {
console.log(this);
//do something with row in master table
});

$('#innerTable').on('click','tbody > tr', function(e){
   e.stopPropagation();
});
});

Answer 3

$(document).ready(function() {
  //'tbody > tr:first:parent tr
  $('#example').on('click', '#example > tbody > tr', function(e) {
    console.log(this);
    //do something with row in master table
  });
});

刚刚添加了您的表格ID

Answer 4

确定。为具有内部表的tr指定类名。例如：

<tr role="row" class="odd has_inner_table">
  <td colspan="6">
    <table style="width:100%">
      <tbody>
        <tr>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

在上面的代码中，我给了＃34; has_inner_table＆＃34;命名为具有内部表的行。

并为其他没有内部表的行命名。

例如。

<tr role="row" class="even not_have_inner_table">
  <td class="sorting_1">Angelica Ramos</td>
  <td>Chief Executive Officer (CEO)</td>
  <td>London</td>
  <td>5797</td>
  <td>2009/10/09</td>
  <td>$1,200,000</td>
</tr>

上面，我给了＃34; not_have_inner_table＆＃34;

在你的jQuery中

$(document).ready(function() {
 //'tbody > tr:first:parent tr
  $('#example').on('click', 'tbody > tr.not_have_inner_table', function(e) {
    console.log(this);
    //do something with row in master table
  });
 });

这意味着只有tr.not_have_inner_table会受到影响。我不太确定语法但很可能是这样的。选择具有特定类名的行。

Answer 5

我目前的解决方案，但@Linus Caldwell只有选择器才有更好的建议

public static void myStaticMethod()
{
    myInternalStaticMethod ("Default", true);
}

public static void myStaticMethod(string inputValue)
{
    myInternalStaticMethod (inputValue, false);
}

private static void myInternalStaticMethod(string inputValue, bool isDefault)
{
    if (isDefault) {
            //Do something
    } else {
            //Do some other task
    }
}

jQuery在主表中只选择tr，而不是在嵌套表中

5 个答案: