Hide/show row in a dynamic table using jscript

Question

I have a json data through ajax call and displayed it in a dynamic html table based on the length of data object obtained from ajax using jscript. Now i need to hide or show data in the table on the basis of a drop down option selected, for example if the user clicks on an item "less than 100" from the drop down, only the related rows which has values less than 100 should be displayed and other rows should be hidden.

 $.ajax({ url: "http://finance.google.com/finance/info?client=ig&q=" +CompName+ "", type: "get", dataType: "jsonp", success:function(data, textstatus, jqXHR){ drawTable(data); } }); function drawTable(data) { for (var i = 0; i < data.length; i++) { drawRow(data[i]); } } function drawRow(rowData){ var row= $("<tr />") $("#table").append(row); row.append($("<td>" + rowData.t + "</td>")); row.append($("<td>" + rowData.l_cur + "</td>")); row.append($("<td>" + rowData.c + "</td>")); row.append($("<td>" + rowData.lt + "</td>")); } 

 <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select the value <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#" id="f1">Below 100</a></li> <li><a href="#" id="f2">100-300</a></li> <li><a href="#" id="f3">300-600</a></li> <li><a href="#" id="f4">600-1000</a></li> <li><a href="#" id="f5">above 1000</a></li> </ul> </div> <div class="table-responsive"> <table id="table" class="table table-striped"> <tr> <th>Name</th> <th>Price</th> <th>Change</th> <th>Date</th> </tr> </table> </div> 

Here's the html AND javascript snippet.

Answer 1

We listen for changes on the select event. We then get the criteria we are using to filter records by getting the value of the selected item. We create multiple filters based on the value. We're going to toggle between showing and hiding them.

 $("select").on("change", function() { var criteria = ($(":selected").prop("value")); var filterOne = $("td:nth-child(2)").filter(function() { return Number($(this).html()) >= 100; }); var filterTwo = $("td:nth-child(2)").filter(function() { return Number($(this).html()) < 100; }); if (criteria == "Less than 100") { filterOne.parent().hide(); filterTwo.parent().show(); } else { filterTwo.parent().hide(); filterOne.parent().show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>Less than 100</option> <option>More than 100</option> </select> <table> <tr> <th>Name</th> <th>Price</th> <th>Change</th> <th>Date</th> </tr> <tr> <td>Stock 1</td> <td>72</td> <td>+5</td> <td>3/4/2012</td> </tr> <tr> <td>Stock 2</td> <td>102</td> <td>+8</td> <td>5/7/2013</td> </tr> <tr> <td>Stock 3</td> <td>90</td> <td>-3</td> <td>3/16/2013 </tr> </table> 

Answer 2

In order to make it work correctly, apart from the text for li , you should also make use of data-attributes which would give you the range to lookup.

Following is an example which shows how you can make use of it.

 <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select the value
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#" id="f1" data-min="0" data-max="100">Below 100</a></li>
          <li><a href="#" id="f2" data-min="100" data-max="300">100-300</a></li>
         </ul>
      </div>

    <div class="table-responsive">
    <table id="table" class="table table-striped">
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Change</th>
            <th>Date</th>
        </tr>    
        <tr>
             <td>ABC</td>
            <td>99</td>
            <td>+10</td>
            <td>12/12/2014</td>
        </tr>
        <tr>
             <td>EFG</td>
            <td>79</td>
            <td>+10</td>
            <td>12/12/2014</td>
        </tr>
        <tr>
             <td>HIJ</td>
            <td>104</td>
            <td>+20</td>
            <td>12/12/2014</td>
        </tr>
    </table>
    </div>
    <script>


    $('li').on("click",function()
        {
            var minRange = $(this).find('a').data("min"); // get the data-min attribute to get the min range
            var maxRange =  $(this).find('a').data("max"); // get the data-min attribute to get the max range
           $("#table tr").each(function() // iterate through each tr inside the table
           {
              var data = $(this).find('td').eq(1).text();  // get the price td column value from each tr
              if(!isNaN(data) && data != "") // skip th tags inside tr and any other td missing the price column value
              {   
                 $(this).hide(); // hide all tr by default
                 if(data >= minRange && data <= maxRange) // check if the price td column value falls within the range
                     $(this).show(); // show the current tr
              }
           });
        });
    </script>

Example : http://jsfiddle.net/RxguB/205/