使用jscript隱藏/顯示動態表中的行

Question

我有一個通過ajax調用的json數據，並根據使用jscript從ajax獲取的數據對象的長度，將其顯示在動態html表中。 現在，我需要根據選擇的下拉選項隱藏或顯示表中的數據，例如，如果用戶單擊下拉菜單中的“小於100”項，則僅值小於100的相關行應該顯示，其他行應該隱藏。

 $.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> 

這是html AND javascript代碼段。

Answer 1

我們監聽select事件的變化。 然后，我們通過獲取所選項目的值來獲取用於過濾記錄的條件。 我們基於該值創建多個過濾器。 我們將在顯示和隱藏它們之間切換。

 $("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

為了使其正常工作，除了li的文本之外，您還應該使用data-attributes ，該data-attributes將為您提供查找范圍。

以下是顯示如何使用它的示例。

 <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>

示例： http ： //jsfiddle.net/RxguB/205/