Javascript 筛选会导致显示太多数据

我正在测试下划线库

这是我的第一个例子：

<!--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代码
变量clienList=[
{姓名：'Juan'，城市：'Madrid'，年龄：27}，
{姓名：'Peter'，城市：'Madrid'，年龄：31}，
{姓名：'Ana'，城市：'巴塞罗那'，年龄：28}，
{姓名：'Oscar'，城市：'Madrid'，年龄：24}，
{姓名：'Dani'，城市：'Bilbao'，年龄：43}，
{姓名：'Pedro'，城市：'Valencia'，年龄：25}，
{姓名：'Pablo'，城市：'Sevilla'，年龄：27}，
{姓名：'Marta'，城市：'Sevilla'，年龄：32}
];

< >我使用一个JavaScript数组加载一个表，当我在中间单元列（Onter）中单击OnCutt时，我将基于ME的筛选表应用到单元格内容中。但是函数性是不正确的，因为我不知道如何更新数组

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

// 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>");
    })       
});

//这是城市列表的事件onclick
$（“#table client table tr td.filter city”）。单击（函数（）{
变量单元格=$（此）；
var-filterCity=u.where（clienst，{city:cell.text（）}）；
//clienList.length=0；
//下划线
_.每个（过滤器城市、功能（元件）{
$（“#表”）.append（“+element.name+”“+element.age+”）；
})       
});

---

谢谢你的帮助，

一件事是它区分大小写。因此，如果您搜索

madrid

，它将不会显示，但只有在您准确搜索

madrid

时，它才会显示

如果是这种情况，您可以使用

大写

mixin作为

下划线

页面中的示例

 _.mixin({
    capitalize: function(string) {
     return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});

像这样使用它

var filterCity = _.where(clienList, {city: _(cell.val()).capitalize()});

您的代码（稍加修改）

//这是用于加载表的javascript代码
变量clienList=[
{姓名：'Juan'，城市：'Madrid'，年龄：27}，
{姓名：'Peter'，城市：'Madrid'，年龄：31}，
{姓名：'Ana'，城市：'巴塞罗那'，年龄：28}，
{姓名：'Oscar'，城市：'Madrid'，年龄：24}，
{姓名：'Dani'，城市：'Bilbao'，年龄：43}，
{姓名：'Pedro'，城市：'Valencia'，年龄：25}，
{姓名：'Pablo'，城市：'Sevilla'，年龄：27}，
{姓名：'Marta'，城市：'Sevilla'，年龄：32}
];
_.米辛({
大写：函数（字符串）{
返回string.charAt（0.toUpperCase（）+string.substring（1.toLowerCase（）；
}
});
//这是城市列表的事件onclick
$（“#搜索”）。单击（函数（）{
变量单元格=$（“#文本”）；
var filterCity=u.where（clienst，{city:u（cell.val（））.capitalize（）}）；
console.log（filterCity.length）；
//clienList.length=0；
//下划线
$（“#表体”）.empty（）；
_.每个（过滤器城市、功能（元件）{
$（“#表”）.append（“+element.name+”“+element.age+”）；
})       
});





名义
城市
伊达
您的问题是总是将筛选结果添加到表中，而不清除旧结果。

所以您可以稍微修改一下更新表的函数，例如使用


//这是用于加载表的javascript代码
变量clienList=[{
名字：“胡安”，
城市：“马德里”，
年龄:27
}, {
姓名：'彼得'，
城市：“马德里”，
年龄:31
}, {
姓名：“安娜”，
城市：“巴塞罗那”，
年龄:28
}, {
名字：“奥斯卡”，
城市：“马德里”，
年龄:24
}, {
姓名：“丹尼”，
城市：“毕尔巴鄂”，
年龄:43
}, {
姓名：“佩德罗”，
城市：“瓦伦西亚”，
年龄:25
}, {
姓名：“Pablo”，
城市：“塞维利亚”，
年龄:27
}, {
姓名：'玛尔塔'，
城市：“塞维利亚”，
年龄:32
}];
//这是城市列表的事件onclick
$（“#table client table tr td.filter city”）。单击（函数（）{
变量单元格=$（此）；
var filterCity=uu.where（clienList{
城市：cell.text（）
});
$（“#表体”）。替换为（“”）+
过滤能力降低（功能（acc，元件）{
返回acc+
“”+element.name+“”+element.age+“”
}, "") +
"");
});

马德里
巴塞罗那
毕尔巴鄂
巴伦西亚
塞维利亚
名义
城市
伊达
我想您需要提供JSFIDLE吗？请在文本框中尝试单击搜索按钮几次，例如
Madrid
：）：）再次更正。。。我想我需要一些咖啡