javascript - 过滤导致显示的数据过多

Question

我正在测试下划线库。

这是我的第一个例子:

<!--This is the html code-->
<table id="table" border="1">
    <thead>
    <tr><th>Nombre</th><th>Ciudad</th><th>Edad</th></tr>
    </thead>
</table>

//This is the javascript code for to load the table
var clienList = [
    {name:'Juan' , city:'Madrid', age:27},
    {name:'Peter', city:'Madrid', age:31},
    {name:'Ana'  , city:'Barcelona', age:28},
    {name:'Oscar', city:'Madrid', age:24},
    {name:'Dani' , city:'Bilbao', age:43},
    {name:'Pedro', city:'Valencia', age:25},
    {name:'Pablo', city:'Sevilla' , age:27},
    {name:'Marta', city:'Sevilla' , age:32}
];

我正在使用一组 JavaScript 加载表格，当我在中间单元格列(城市)中单击时，我应用基于单元格内容的过滤表。但功能不正确，因为我不知道更新数组。

当应用过滤器时，例如“马德里”，将我添加到带有城市“马德里”的表数组元素中，但我会看到所有行，而只应该显示带有马德里城市的行

// This is event onclick of the city column table
$("#table-client table tr td.filter-city").click(function() {
    var cell = $(this);
    var filterCity = _.where(clienList, {city: cell.text()});

    //clienList.length = 0;

    //uso de underscore
    _.each(filterCity,function(element) {

    $("#table").append("<tbody><tr><td>"+element.name+"</td><td class='filter-city'><a href='#'>"
    +element.city+
    "</a></td><td>"+element.age+"</td></tr></tbody>");
    })       
});

谢谢你帮我，

Answer 1

您的问题是您总是将过滤结果添加到表中，而不清除旧的结果。
因此，您可以稍微修复更新表的功能，例如使用 replaceWith .

//This is the javascript code for to load the table
var clienList = [{
  name: 'Juan',
  city: 'Madrid',
  age: 27
}, {
  name: 'Peter',
  city: 'Madrid',
  age: 31
}, {
  name: 'Ana',
  city: 'Barcelona',
  age: 28
}, {
  name: 'Oscar',
  city: 'Madrid',
  age: 24
}, {
  name: 'Dani',
  city: 'Bilbao',
  age: 43
}, {
  name: 'Pedro',
  city: 'Valencia',
  age: 25
}, {
  name: 'Pablo',
  city: 'Sevilla',
  age: 27
}, {
  name: 'Marta',
  city: 'Sevilla',
  age: 32
}];

// This is event onclick of the city column table
$("#table-client table tr td.filter-city").click(function() {
var cell = $(this);
var filterCity = _.where(clienList, {
  city: cell.text()
});

$("#table tbody").replaceWith("<tbody>" +
  filterCity.reduce(function(acc, element) {
    return acc +
      "<tr><td>" + element.name + "</td><td class='filter-city'><a href='#'>" + element.city +
      "</a></td><td>" + element.age + "</td></tr>"
  }, "") +

  "</tbody>");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="table-client">
<table >
  <tr>
    <td class="filter-city">Madrid</td>
  </tr>
  <tr>
    <td class="filter-city">Barcelona</td>
  </tr>
  <tr>
    <td class="filter-city">Bilbao</td>
  </tr>
  <tr>
    <td class="filter-city">Valencia</td>
  </tr>
  <tr>
    <td class="filter-city">Sevilla</td>
  </tr>
</table>
  </div>
<!--This is the html code-->
<table id="table" border="1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Ciudad</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

更新:另一种方法是在添加之前删除所有子项，例如

//This is the javascript code for to load the table
var clienList = [{
  name: 'Juan',
  city: 'Madrid',
  age: 27
}, {
  name: 'Peter',
  city: 'Madrid',
  age: 31
}, {
  name: 'Ana',
  city: 'Barcelona',
  age: 28
}, {
  name: 'Oscar',
  city: 'Madrid',
  age: 24
}, {
  name: 'Dani',
  city: 'Bilbao',
  age: 43
}, {
  name: 'Pedro',
  city: 'Valencia',
  age: 25
}, {
  name: 'Pablo',
  city: 'Sevilla',
  age: 27
}, {
  name: 'Marta',
  city: 'Sevilla',
  age: 32
}];

// This is event onclick of the city column table
$("#table-client table tr td.filter-city").click(function() {
  var cell = $(this);
  var filterCity = _.where(clienList, {
    city: cell.text()
  });

  $("#table tbody").empty();
  //uso de underscore
  _.each(filterCity, function(element) {

    $("#table tbody").append("<tr><td>" + element.name + "</td><td class='filter-city'><a href='#'>" + element.city +
      "</a></td><td>" + element.age + "</td></tr>");
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="table-client">
  <table>
    <tr>
      <td class="filter-city">Madrid</td>
    </tr>
    <tr>
      <td class="filter-city">Barcelona</td>
    </tr>
    <tr>
      <td class="filter-city">Bilbao</td>
    </tr>
    <tr>
      <td class="filter-city">Valencia</td>
    </tr>
    <tr>
      <td class="filter-city">Sevilla</td>
    </tr>
  </table>
</div>
<!--This is the html code-->
<table id="table" border="1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Ciudad</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>