CODEWITHSUNDEEP
javascriptjquery
LCJ
LCJ

Reputation: 22662

Hide all Table Rows that does not have a "div"

I have following html with radio buttons and a table. When the radio button “Error Only” is selected, we need tohide all table rows that does not have a div with class name = ‘errorLine’

I have written following code fort this

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

This does not work. I understand the reason – the above code is looking for a row with class name ‘errorLine’; not looking for a div inside

How can we modify this jQuery code to hide all rows other than the error rows?

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


});

Upvotes: 0

Views: 523

Answers (2)

Walid Ammar
Walid Ammar

Reputation: 4126

Try this:

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

Fiddle

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

You can use :not() in combination with the :has() selector:

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

And then to show the rows again you could repeat that selector, though it's simpler to just show everything:

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

Demo: http://jsfiddle.net/Z86dq/29/

You may or may not find it more readable to break the big selector up by using the .not() method rather than the :not() selector:

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

Demo: http://jsfiddle.net/Z86dq/30/

Upvotes: 3

Related Questions