javascript - 使用 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 和 javascript 片段。

Answer 1

为了使其正常工作，除了 li 的文本之外，您还应该使用 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/