使用 JavaScript 过滤 HTML 表格 - 无插件

Question

更新：

我仍然无法呈现任何数据。我使用排序的基本策略是编写一个函数来过滤名为 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 filterCats(){
                $.getJSON('cats.json', function(result) {
                    var cats = result;  // redundant, but kept for readability
                    var criteria = document.getElementById('filter').value;
                    var filteredData = cats.filter(function(c){return c.breed === criteria;});
                    renderData(filteredData);
                });
            }
       <label for="filter">Filter</label>
       <input type="text" name="filter" value="" id="filter" onchange="filterCats()" />

我的名为 cat.json 的 JSON 文件看起来像这样，但要大得多：

[{
                    "breed" : "Abyssinian",
                    "country" : "Ethiopia",
                    "coffeePreference" : "espresso",
                    "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Gustav_chocolate.jpg/100px-Gustav_chocolate.jpg"
                }, {
                    "breed" : "Aegean",
                    "country" : "Greece",
                    "coffeePreference" : "medium roast, cream and sugar",
                    "picture" : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Aegean_cat.jpg/100px-Aegean_cat.jpg"
}]

最后我会相应地渲染数据，这是可行的：

               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;
                }            

任何帮助将不胜感激。

Answer 1

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

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

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

另一件事：return c.breed === "criteria"; 这是将品种值与字符串文字“标准”进行比较，而不是您从过滤器输入中获得的标准值，所以除非您的猫品种是“标准”，否则这永远不会评估为真 -应该是：return c.breed === 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;}));
    });
}

---

简单的实例：

var improvizedCatsObject = [
  {name: 'shomz',  breed: 'answerer'}, 
  {name: 'robinette',breed: 'questioner'}, 
  {name: 'not pure js',breed: 'jquery'},
  {name: 'is a library',breed: 'jquery'}
];

function filterCats(criteria) {  
  renderData(improvizedCatsObject.filter(function(c) {
    return c.breed == criteria;
  }));
}

function renderData(res) {
  var out = '';
  for (var i = 0; i < res.length; i++) {
    out += '<p>' + res[i].name + '</p>';
  }
  $('#res').html(out);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="filter" value="" id="filter" onkeyup="filterCats(this.value)" />
<span>Try inputting "answerer" or "questioner" (no quotes)</span>
<div id="res"></div>