如何使用Javascript筛选已加载JSON数据的表

我试图从一个加载了JSON数据的表中过滤信息。 我想做的是输入数据，然后按下按钮过滤表格。以下是我的html文件的重要部分：

<form role="search" class="search-form" style="flex-grow:1">
        <div class="form-group">
            <label for="dpt">Partida:</label>
            <input type="text" class="form-control" id="dpt">
        </div>
        <div class="form-group">
            <label for="dtn">Destino:</label>
            <input type="text" class="form-control" id="dtn">
        </div>
        <div class="row-md">
            <button class="Search" onclick=searchDepartures()>Procurar</button>
        </div>
    </form>
</div>
<div class="container" style="width: 50%; overflow: hidden; float: right;">
    <table class="table table-bordered table-striped table-hover" id="routes_table" style="width: 100%;">
        <thread>
            <tr>
                <th>Partidas</th>
                <th>Destinos</th>
            </tr>
        </thread>
        <tbody>
        </tbody>
    </table>
</div>

到目前为止，除了将整个表放入外，没有任何效果，这是输入为空时所期望的。

全部替换

$(routes_table).append(routes_data);

与

您没有routes\u表变量，但表上有routes\u表ID

此外，您在变量范围、按id获取元素和其他方面存在问题，请检查以下内容：

var json = [];
$.getJSON("locations.json", function (data) {
    var routes_data = [];
    $.each(data, function (key, value) {
        routes_data += '<tr>';
        routes_data += '<td>' + value.departure + '</td>';
        routes_data += '<td>' + value.arrival + '</td>';
        routes_data += '</tr>';
    })
    json = data;
    $('#routes_table tbody').append(routes_data);
});

function searchDepartures() {
    var results = [];
    var searchField = "departure";
    var searchVal = document.getElementById('dtn').value;
    $('#routes_table tbody').html('');
    for (var i=0 ; i < json.length ; i++)
    {
        if (json[i][searchField] == searchVal) {

          var newroutes_data = '';
            newroutes_data += '<tr>';
            newroutes_data += '<td>' + json[i].departure + '</td>';
            newroutes_data += '<td>' + json[i].arrival + '</td>';
            newroutes_data += '</tr>';


            results.push(newroutes_data);
            $('#routes_table tbody').append(newroutes_data);
        }
    }
}

var json=[]；
$.getJSON（“locations.json”，函数（数据）{
var routes_data=[]；
$。每个（数据、函数（键、值）{
路由_数据+=''；
路由_数据+=''+值。出发+''；
路由_data+=''+value.arrival+''；
路由_数据+=''；
})
json=数据；
$（'#routes_table tbody'）。追加（routes_data）；
});
函数searchdepartions（）{
var结果=[]；
var searchField=“离开”；
var searchVal=document.getElementById（'dtn'）。值；
$（'#routes_table tbody'）.html（''）；
for（var i=0；i

PS.修复html表-不是线程，而是AD：

<thead>
    <tr>
        <th>Partidas</th>
        <th>Destinos</th>
    </tr>
</thead>
<tbody>
</tbody>

游击队
迪斯特诺斯

没有任何区别，仍然无法搜索表，sorry@NightShadowSaintPT您正试图在getjson中使用变量并访问searchField=value.department，其中没有value对象。检查我的最新答案我认为我们正在取得进展，但表格仍然没有updating@NightShadowSaintPT将附录更改为：

$（“#routes_table tbody”）.append（routes_data）我没有注意到你有thead和tbody，这应该可以修复，结果仍然一样，按钮只是有点重新加载页面
$('#routes_table').append(routes_data);

var json = [];
$.getJSON("locations.json", function (data) {
    var routes_data = [];
    $.each(data, function (key, value) {
        routes_data += '<tr>';
        routes_data += '<td>' + value.departure + '</td>';
        routes_data += '<td>' + value.arrival + '</td>';
        routes_data += '</tr>';
    })
    json = data;
    $('#routes_table tbody').append(routes_data);
});

function searchDepartures() {
    var results = [];
    var searchField = "departure";
    var searchVal = document.getElementById('dtn').value;
    $('#routes_table tbody').html('');
    for (var i=0 ; i < json.length ; i++)
    {
        if (json[i][searchField] == searchVal) {

          var newroutes_data = '';
            newroutes_data += '<tr>';
            newroutes_data += '<td>' + json[i].departure + '</td>';
            newroutes_data += '<td>' + json[i].arrival + '</td>';
            newroutes_data += '</tr>';


            results.push(newroutes_data);
            $('#routes_table tbody').append(newroutes_data);
        }
    }
}

<thead>
    <tr>
        <th>Partidas</th>
        <th>Destinos</th>
    </tr>
</thead>
<tbody>
</tbody>