隐藏所有没有“div”的表格行答案

【问题标题】：Hide all Table Rows that does not have a "div"隐藏所有没有“div”的表格行
【发布时间】：2014-07-13 04:50:21
【问题描述】：

我有以下带有单选按钮和表格的 html。当单选按钮“Error Only”被选中时，我们需要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();
            });


});

【问题讨论】：

标签： javascript jquery

【解决方案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/

【讨论】：

【解决方案2】：

试试这个：

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

Fiddle

【讨论】：

您需要测试.length === 0 而不是> 0，因为这样做的目的是隐藏那些没有有.errorLine 孩子的人。
确定你是对的，我着急写了，希望第一个回答，谢谢:)