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

我们会监听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来为您提供查找范围。

以下是一个展示如何使用它的示例。

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

使用jscript在动态表中隐藏/显示行

2 个答案: