使用JavaScript筛选HTML表-无插件

更新：

我仍然无法呈现任何数据。我使用排序的基本策略是编写一个函数来筛选名为filterCats的过滤器，然后在getFilterBreed中将其作为回调调用。这种方法似乎毫无用处。这一方法如下：

               function getFilterBreed(){       
                    $.getJSON('cats.json', function(cats) {
                        var cats = cats;
                        filterCats(cats, criteria);
                    });
                }

                function filterCats(cats, criteria){
                    //renderData(cats.filter(function(c){return c.breed === criteria;}));
                    var criteria = document.getElementById('filter').value;
                    var filteredData = cats.filter(function(c){return c.breed === criteria;});
                    renderData(filteredData);
                }

以及HTML：

                    <label for="filter">Filter</label>
                    <input type="text" name="filter" value="" id="filter" onchange="filterBreed()" />

最后，我将相应地渲染数据，这是有效的：

               function renderData(cats){
                        var output='<table id="indextable" border="1" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">';
                        output+="<thead>"
                        output+="<tr>";
                        output+="<th> HeadShot </th>";
                        output+="<th><button onclick='getSortedBreedData()'>Breed</button></th>";
                        output+="<th><button onclick='getSortedCountryData()'>Country</button></th>";
                        output+="<th><button onclick='getSortedCoffeeData()'>CoffeePreference</button></th>";
                        output+="</tr>";
                        output+="</thead>"

                    for (var i in cats) {
                        output+="<tbody>" 

                        output+="<tr>";
                        output+="<td><img src='" + cats[i].picture+"' alt='missing cat picture'></td>"
                        output+="<td>" + cats[i].breed + "</td>"
                        output+="<td>" + cats[i].country + "</td>"
                        output+="<td>" + cats[i].coffeePreference + "</td>"
                        output+="</tr>";
                        output+="</tbody>" 

                    }
                    output+="</table>";
                    document.getElementById("catTable").innerHTML=output;
                }            

函数渲染数据（CAT）{
var输出=“”；
输出+=“”
输出+=“”；
输出+=“头像”；
输出+=“品种”；
产出+=“国家”；
输出+=“咖啡偏好”；
输出+=“”；
输出+=“”
for（猫的var i）{
输出+=“”
输出+=“”；
输出+=“”
输出+=“”+猫[i]。繁殖+“”
输出+=“”+猫[i]。国家+“”
输出+=“”+cats[i]。咖啡偏好+“”
输出+=“”；
输出+=“”
}
输出+=“”；
document.getElementById（“catTable”）.innerHTML=输出；
}            

---

任何帮助都将不胜感激

好的，这是调用过滤函数的输入（注意：没有函数参数）：

然后，在getJSON回调中，有一个与外部函数参数同名的参数；同样的事情在内部过滤器函数中再次发生

另一件事：

返回c.bride==“criteria”这是将品种值与字符串文字“criteria”进行比较，而不是从过滤器输入中获得的标准值，因此除非您的猫品种为“criteria”，否则这将永远不会计算为true-应该是：
返回c.bride==criteria取而代之


最后，在除掉了许多猫并确定了标准后，我们得到了如下结果：

function filterCats(){
    $.getJSON('cats.json', function(result) {
        var cats = result;  // redundant, but kept for readability
        var criteria = $('#filter').val();
        var filteredData = cats.filter(function(c){return c.breed === criteria;});
        renderData(filteredData);
    });
}

此代码未经测试，但应该可以工作


通过将条件值直接传递给函数，可以进一步优化此代码：

<input type="text" name="filter" value="" id="filter" onchange="filterCats(this.value)" />

function filterCats(criteria){
    $.getJSON('cats.json', function(cats) {
        renderData(cats.filter(function(c){return c.breed === criteria;}));
    });
}


功能过滤器测试（标准）{
$.getJSON（'cats.json'，函数（cats）{
renderData（cats.filter（函数（c）{return c.bride==criteria；}））；
});
}


简单的实例：


var-improvizedCatsObject=[
{名字：'shomz'，品种：'answerer'}，
{名字：'robinette'，品种：'questioner'}，
{name:'notpure js'，breed:'jquery'}，
{name:'is a library'，breed:'jquery'}
];
函数过滤器测试（标准）{
renderData（改进的CATSobject.filter（函数c）{
返回c.bride==标准；
}));
}
函数renderData（res）{
var out=''；
对于（变量i=0；i'；
}
$（'#res'）.html（out）；
}

尝试输入“回答者”或“提问者”（无引号）
“没有库”
-使用jQuerywhat是实际问题？来澄清Shomz@肖姆兹，我为这句话的语义道歉。我应该说没有插件。问题是，我的函数filterData似乎应该从输入字段中提取并工作。为什么没有发生这种情况？我不是要你为我做任何工作。我只是想学习基本的前端JS。谢谢@simon我正在尝试找出如何将数据从HTML表单id=filter拉入我的函数filterData.function filterCats（）{$.getJSON（'cats.json'，function（result）{var cats=result；//冗余，但为了可读性而保留var criteria=$（'#filter'）。val（）；var filteredData=cats.filter（函数（c）{return c.bride===criteria；}）；alert（filteredData[0]）；}返回未定义的数据。filteredData似乎正在捕获任何数据。filteredData[0]。bride也不工作。您必须输入现有的品种才能获得一些结果-请参阅我编写的实时演示。我也可能是您返回的JSON，我不知道它是什么样子。
<input type="text" name="filter" value="" id="filter" onchange="filterCats()" /></br></br>

function filterCats(cats){
    $.getJSON('cats.json', function(cats) {
        var cats = cats;
        var criteria = document.getElementById("filter").value;
        var filteredData = cats.filter(function(cats){return cats.breed === "criteria";});
        renderData(cats);
    });
}

function filterCats(){
    $.getJSON('cats.json', function(result) {
        var cats = result;  // redundant, but kept for readability
        var criteria = $('#filter').val();
        var filteredData = cats.filter(function(c){return c.breed === criteria;});
        renderData(filteredData);
    });
}

<input type="text" name="filter" value="" id="filter" onchange="filterCats(this.value)" />

function filterCats(criteria){
    $.getJSON('cats.json', function(cats) {
        renderData(cats.filter(function(c){return c.breed === criteria;}));
    });
}