Question

我正在尝试从已加载JSON数据的表中过滤信息。我想做的是输入内容，然后在按下按钮时过滤表格。这是我的html文件的重要部分：

List#isEmpty

还有我的Javascript文件：

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

也是我的JSON文件：

$(document).ready(function () {

$.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>';
    })
    $(routes_table).append(routes_data);
});

$.getJSON("locationsEN.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>';
    })
});

function searchDepartures() {
    var results = [];
    var searchField = value.departure;
    var searchVal = "#dpt";
    for (var i=0 ; i < routes_data.length ; i++)
    {
        if (routes_data[i][searchField] == searchVal) {
            results.push(routes_data[i]);
            $(routes_table).append(routes_data);
        }
    }
}

到目前为止，除了放入整个表（在输入为空时可以预期）之外，什么也没有做。

Answer 1

全部替换

$(routes_table).append(routes_data);

使用

$('#routes_table').append(routes_data);

您没有routes_table变量，但是表上有routes_table 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);
        }
    }
}

PS。修复您的html表-不是线程，而是thead：

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

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

1 个答案: