如何使用 jquery 隐藏基于子类名的表行?

Posted

技术标签:

【中文标题】如何使用 jquery 隐藏基于子类名的表行?【英文标题】:How to hide table rows based on child class name using jquery? 【发布时间】:2017-01-31 00:33:28 【问题描述】:

我有很多行,我想隐藏一些没有特定类的 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 有一个或两个类的输入。我想隐藏那些没有uncorrected 类的行。

【问题讨论】:

【参考方案1】:

使用.filter() 选择行有uncorrected 类。

$("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>

【讨论】:

【参考方案2】:

您可以使用最接近的()方法 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>

【讨论】:

【参考方案3】:
$("table tr.game").each(function()
    var self=$(this);
    if(!self.find("input").hasClass("uncorrected"))
        self.hide();
    
);

Working DEMO

【讨论】:

以上是关于如何使用 jquery 隐藏基于子类名的表行?的主要内容,如果未能解决你的问题,请参考以下文章

如何在jQuery中获取对具有特定值的表行的引用

如何将我的自定义 jquery 表行过滤与 datatables.net 集成?

jQuery获取表行中的隐藏字段值

对动态表行使用 jquery 数据表

Jquery比较用复选框选择的表行并比较列

jQuery .validate() 不适用于动态创建的表行