如何使用 jquery 隐藏基于子 class 名称的 table 行？

Question

我有很多行，我想隐藏一些没有特定 class.

的 tr

示例：

<tr id="game-22590" class="game">
    <td class="pos left-edge">
        <div>2</div>
    </td>
    <td class="cost">
        <input class="dollars-paid uncorrected" type="text" value="19,99" tabindex="4">
    </td>
</tr>
<tr id="game-22591" class="game">
    <td class="pos left-edge">
        <div>3</div>
    </td>
    <td class="cost">
        <input class="dollars-paid" type="text" value="23,99" tabindex="4">
    </td>
</tr>

td.cost 有一个 class 或两个输入。我想隐藏那些没有 uncorrected class.

的行

Answer 1

您可以使用 closest() 方法jQuery...请查看此解决方案

$(".dollars-paid").not(".uncorrected").closest(".game").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr id="game-22590" class="game">
    <td class="pos left-edge">
        <div>2</div>
    </td>
    <td class="cost">
        <input class="dollars-paid uncorrected" type="text" value="19,99" tabindex="4">
    </td>
</tr>
<tr id="game-22591" class="game">
    <td class="pos left-edge">
        <div>3</div>
    </td>
    <td class="cost">
        <input class="dollars-paid" type="text" value="23,99" tabindex="4">
    </td>
</tr>

<tr id="game-22592" class="game">
    <td class="pos left-edge">
        <div>3</div>
    </td>
    <td class="cost">
        <input class="dollars-paid" type="text" value="25,99" tabindex="4">
    </td>
</tr>
  </table>

Answer 2

使用 .filter() 选择行有 uncorrected class.

$("tr.game").filter(function(){
    return $(this).find("input.uncorrected").length == 0;
}).hide();

$("tr.game").filter(function(){
    return $(this).find("input.uncorrected").length == 0;
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="game-22590" class="game">
    <td class="pos left-edge">
      <div>2</div>
    </td>
    <td class="cost">
      <input class="dollars-paid uncorrected" type="text" value="19,99" tabindex="4">
    </td>
  </tr>
  <tr id="game-22591" class="game">
    <td class="pos left-edge">
      <div>3</div>
    </td>
    <td class="cost">
      <input class="dollars-paid" type="text" value="23,99" tabindex="4">
    </td>
  </tr>
</table>

Answer 3

$("table tr.game").each(function(){
    var self=$(this);
    if(!self.find("input").hasClass("uncorrected")){
        self.hide();
    }
});

Working DEMO

如何使用 jquery 隐藏基于子 class 名称的 table 行？

How to hide table rows based on child class name using jquery?

html

javascript

jquery

html-table

classname