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代码以隐藏错误行以外的所有行？

Fiddle

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() selector：

结合使用

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

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

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

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

使用.not() method而不是:not() selector：

，您可能会或可能不会发现打破大选择器更具可读性

$("#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();
   }
});

Fiddle

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

2 个答案: