使用Jquery选择器选取表格中除了单元格以外的所有元素

Question

我正在试图找到正确的选择器，以便在单击任何“Hello”单元格时更改背景为蓝色，但是如果单击“Goodbye”，则不更改。向“Hello”单元格添加类是一种可能的选项，但并不理想。

$(function() {
  $('#myTable td').click(function() {
    $('#myTable').addClass('unfocused');
  });
});

.unfocused {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>

  <tr>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
  </tr>

  <tr>
    <td>
      <table id='otherTable'>
        <tr>
          <td>Something</td>
        </tr>
      </table>
    </td>
  </tr>

我已经尝试过：

 $('#myTable td').not('#otherTable td').click(....
 $('#myTable td').not('#otherTable').click(....

这些方法都不起作用。

附上一个fiddle。

Fiddle

- bart2puck

---

我理解的对吗？您想选择所有没有 #otherTable 的 <th> 吗？如果不是，您需要扩展一些 if's :/ - Krzysiek Szymczak

所有不在#otherTable中的<th>元素 - bart2puck

完全不相关的问题：为什么要在th中放置一个table？ - Andrei V

应该是 td。我只是打字太快，没有注意到。 - bart2puck

你能注意并修正问题，使用正确的标记吗？ - Salman A

Answer 1

也许这就是你需要的。请看下面的演示

有两个选项可供选择。

由于您正在检查 <th> 的文本内容以执行特定操作，因此可以使用 jQuery .text() 获取 <th> 的内容。

阅读更多关于 jQuery .text() 的内容

您还需要JavaScript中的this指向当前点击的 <th>。

在MDN上了解更多关于关键字this的知识

选项1

该选项在单击时将.unfocused类添加到所有<th>。

$(document).ready(function() {

  $('th').click(function() {
    if ($(this).text() == "Hello") {
      $(this).addClass('unfocused');
    }
  });

});

.unfocused {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>
      <table id='otherTable'>
        <tr>
          <th>Goodbye</th>
        </tr>
      </table>
    </th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
</table>

选项2

此选项会先从所有的<th>中移除.unfocused类，然后再将.unfocused类添加到当前点击的<th>中。

$(document).ready(function() {

  $('th').click(function() {
    if ($(this).text() == "Hello") {
      $('th').removeClass('unfocused');
      $(this).addClass('unfocused');
    }
  });

});

.unfocused {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>
      <table id='otherTable'>
        <tr>
          <th>Goodbye</th>
        </tr>
      </table>
    </th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
</table>

- Abk

Answer 2

您可以使用:contains选择器：

$(function() {
  $('#myTable th:contains(Hello)').click(function() {
    $('#myTable').addClass('unfocused');
  });
});

.unfocused {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id='myTable'>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Hello</th>
  </tr>
  <tr>
    <th>Goodbye</th>
  </tr>
</table>

- Salman A

Answer 3

您正在为父级提供背景信息。因此，这个解决方案可能对您有用。

第一种方法

$('#myTable th').click(function() {
    $('#myTable').addClass('unfocused');
    $('#otherTable').addClass('white');
});

第二种方法

$('#myTable th').click(function() {
    $(this).parent().addClass('unfocused');
    $(this).parent().siblings().not(".check").addClass('unfocused');
});

- priya_singh

Answer 4

好的，我明白了，我认为你正在寻找类似于这样的东西。

https://jsfiddle.net/smqdx20x/

$('#myTable th').not($('th > table#otherTable').parent()).not('table#otherTable th')

- Krzysiek Szymczak