如何使用 jQuery 和 ajax 从输入中填写表格？答案

【问题标题】：How to fill in a table from a input using jQuery and ajax?如何使用 jQuery 和 ajax 从输入中填写表格？
【发布时间】：2017-05-10 02:37:39
【问题描述】：

我一直在尝试使用 jQuery 和 ajax 根据搜索结果填写表格，但我无法使其工作。

这里是html代码：

<form class="form">
    <div class="form-group">
        <label for="livsmedelsSokOrd">Livsmedel</label>
        <input type="search" class="form-control" id="livsmedelsSokOrd" placeholder="t ex makaroner">
    </div>
    <button type="button" class="btn btn-default" id="sok-button">Sök</button>
</form>
<table id="tabell" class="table">
    <thead>
        <tr>
            <th>Livsmedel</th>
            <th>Energi (kcal/100g)</th>
            <th>Kolhydrater</th>
            <th>Protein</th>
            <th>Fett</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

JS：

$("#sok-button").click(function(){
    $.ajax({
        url      : "getlivsmedel.php",
        dataType : "jsonp",
        data     : {
            namn: $('input#livsmedelsSokOrd').val()
        },          
        success  : function(response){
            var foodArray = response.livsmedel;
            for (var i = 0; i< foodArray; i++){
                var namn         = response[i].namn;
                var energi       = response[i].energi;
                var protein      = response[i].protein;
                var fett         = response[i].fett;
                var kolhydrater  = response[i].kolhydrater;
                $("#tabell").append(
                    "<tr><td>"+ namn +"</td><td>"+ energi +"</td><td>"+ protein +"</td><td>"+ fett +"</td><td>"+ kolhydrater +"</td></tr>"
                );
            }
        }
    });
});

按下搜索按钮后，我可以在 javascript 控制台中看到它加载了 php，但它没有填满表格，我已经尝试了所有我能想到的。

【问题讨论】：

收到的数据是什么样的？我能说的一件事是for 循环部分应该是-i < foodArray.length。此外，对于大量数据，请避免在循环内进行 DOM 修改。

标签： javascript jquery html ajax html-table

【解决方案1】：

您的循环有 2 个问题。

你需要i < foodarray.length 而不是i < foodarray 并且response[i] 应该是foodarray[i]

尝试调整到：

for (var i = 0; i< foodArray.length; i++){
     var namn = foodArray[i].namn;
   ......

您应该会在浏览器控制台中看到 response[i] 未定义的错误

【讨论】：

【解决方案2】：

您应该将<tr> 附加到<tbody> 而不是<table>。 $("#tabell").append 应该变成 $("#tabell tbody").append

【讨论】：