隐藏所有没有“ div”的表行

LCJ

我有以下带有单选按钮和表格的html。当“仅错误”被选中的单选按钮,我们需要hide all table rows that does not have a div with class name = ‘errorLine’

我为此写了以下代码

    //Hide all rows that does not have a div with class named "errorLine"
    $("#tblVisualAidResult tbody tr:not('.errorLine')").hide();

这是行不通的。我知道原因–上面的代码正在查找类名称为“ errorLine”的行;不在里面寻找一个div

我们如何修改此jQuery代码以隐藏除错误行以外的所有行?

小提琴

的HTML

                            <div class="floatLeftGeneral">
                                View:</div>
                            <div class="floatLeftGeneral">
                                <input type="radio" value="All" name="viewMode" class="viewModeRadio" checked="checked">
                                All
                                <input type="radio" value="Error" name="viewMode" class="viewModeRadio">
                                Errors Only
                            </div>

 </br>      

 <table id="tblVisualAidResult" class="resultLog" border="0" cellpadding="0" cellspacing="0" style="width: 100%; display: table; background-color: rgb(229, 219, 226);">
            <thead>
                <tr>
                    <td class="Heading3" style="width: 15%;">
                        Serial Number
                    </td>
                    <td class="Heading3" style="width: 30%;">
                        Container ID
                    </td>
                    <td class="Heading3">
                        Status
                    </td>
                </tr>
            </thead>
            <tbody>
  <tr class="Normal" style="display: table-row;">
    <td style="padding-left: 5px">
            1
    </td>
    <td>
            ~~3957495
    </td>
    <td>
            Received 2 of 5 of work lot 6D20223403
    </td>

   </tr>

  <tr class="Normal" style="display: table-row;">
    <td style="padding-left: 5px">
            <div class="errorLine">x<div>
    </div></div></td>
    <td>
            ~~
    </td>
    <td>
            Case Label does not Exist
    </td>

   </tr>

            </tbody>
  </table>

jQuery的

$(document).ready(function () 
{


    var viewMode = "All"

    function handleLogVisibility()
            {

               if(viewMode == "Error")
               {
                    alert(viewMode);

                    //Hide all rows that does not have a div with class named "errorLine"
                    $("#tblVisualAidResult tbody tr:not('.errorLine')").hide();
               }
               else
               {
                    alert(viewMode);
                    $("#tblVisualAidResult tbody tr:not('.errorLine')").show();
               }


            }



            //Radio button change
            $('.viewModeRadio').change(function () 
            {
                 viewMode = $(this).val();
                 handleLogVisibility();
            });


});
nnnnnn

您可以:not():has()选择器结合使用

$("#tblVisualAidResult tbody tr:not(:has('.errorLine'))").hide();

然后再次显示行,您可以重复该选择器,尽管只显示所有内容更简单:

$("#tblVisualAidResult tr").show();

演示:http : //jsfiddle.net/Z86dq/29/

您可能会或可能不会发现使用.not()方法而不是:not()选择器来分解大选择器更具可读性

$("#tblVisualAidResult tbody tr").not(":has('.errorLine')").hide();

演示:http//jsfiddle.net/Z86dq/30/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

获取删除的div的ID,并隐藏所有没有该类的所有div

来自分类Dev

隐藏所有没有mysql数据库结果的html表

来自分类Dev

隐藏所有没有mysql数据库结果的html表

来自分类Dev

有没有一种方法可以通过向父级添加内联样式来在父级div /容器中隐藏所有div?

来自分类Dev

隐藏所有ListObject行,但选定的行除外

来自分类Dev

如何从表中隐藏所有tr,但单击除外

来自分类Dev

覆盖不隐藏所有基础div

来自分类Dev

通过传递 id 值隐藏所有 div

来自分类Dev

隐藏所有行并显示所选内容

来自分类Dev

如何隐藏所有未突出显示的行?

来自分类Dev

AngularJS ui-grid隐藏所有行

来自分类Dev

python openpyxl:隐藏所有行到最后

来自分类Dev

是否可以隐藏所有重复数据行?

来自分类Dev

jQuery隐藏所有没有类的元素

来自分类Dev

javascript / jQuery过滤器的默认选项隐藏所有表行

来自分类Dev

javascript / jQuery过滤器的默认选项隐藏所有表行

来自分类Dev

显示/隐藏div,并在按钮上按下javascript(并先隐藏所有div)

来自分类Dev

使用If函数VBA隐藏和取消隐藏所有工作表上的列

来自分类Dev

隐藏所有其他具有相同类的行,但单击的除外

来自分类Dev

显示一个div但隐藏所有其他div无效

来自分类Dev

在第5个div之后隐藏所有其他div

来自分类Dev

显示一个div,单击隐藏所有其他

来自分类Dev

隐藏所有div元素,但显示前两个

来自分类Dev

Angular JS-显示1 div并隐藏所有其他

来自分类Dev

Angular JS-显示1 div并隐藏所有其他

来自分类Dev

Vim折叠:如何隐藏所有不包含搜索模式的单行(或折叠零行)?

来自分类Dev

在Intellij编辑器中隐藏所有文档行的快捷键是什么?

来自分类Dev

显示RMarkdown中所有没有标签的行

来自分类Dev

获取所有没有前导零的行

Related 相关文章

  1. 1

    获取删除的div的ID,并隐藏所有没有该类的所有div

  2. 2

    隐藏所有没有mysql数据库结果的html表

  3. 3

    隐藏所有没有mysql数据库结果的html表

  4. 4

    有没有一种方法可以通过向父级添加内联样式来在父级div /容器中隐藏所有div?

  5. 5

    隐藏所有ListObject行,但选定的行除外

  6. 6

    如何从表中隐藏所有tr,但单击除外

  7. 7

    覆盖不隐藏所有基础div

  8. 8

    通过传递 id 值隐藏所有 div

  9. 9

    隐藏所有行并显示所选内容

  10. 10

    如何隐藏所有未突出显示的行?

  11. 11

    AngularJS ui-grid隐藏所有行

  12. 12

    python openpyxl:隐藏所有行到最后

  13. 13

    是否可以隐藏所有重复数据行?

  14. 14

    jQuery隐藏所有没有类的元素

  15. 15

    javascript / jQuery过滤器的默认选项隐藏所有表行

  16. 16

    javascript / jQuery过滤器的默认选项隐藏所有表行

  17. 17

    显示/隐藏div,并在按钮上按下javascript(并先隐藏所有div)

  18. 18

    使用If函数VBA隐藏和取消隐藏所有工作表上的列

  19. 19

    隐藏所有其他具有相同类的行,但单击的除外

  20. 20

    显示一个div但隐藏所有其他div无效

  21. 21

    在第5个div之后隐藏所有其他div

  22. 22

    显示一个div,单击隐藏所有其他

  23. 23

    隐藏所有div元素,但显示前两个

  24. 24

    Angular JS-显示1 div并隐藏所有其他

  25. 25

    Angular JS-显示1 div并隐藏所有其他

  26. 26

    Vim折叠:如何隐藏所有不包含搜索模式的单行(或折叠零行)?

  27. 27

    在Intellij编辑器中隐藏所有文档行的快捷键是什么?

  28. 28

    显示RMarkdown中所有没有标签的行

  29. 29

    获取所有没有前导零的行

热门标签

归档