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

Question

我有以下带有单选按钮和表格的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();
            });


});

Answer 1

您可以将: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/

Answer 2

尝试这个：

$('#tblVisualAidResult tbody tr').each(function(){
   if($(this).find('div.errorLine').length === 0){
      $(this).hide();
   }
});

小提琴