Question

我有一个预定义的表头像这样：

<div class="container">

    <div class="livsmedelsmall">
        <h1>Sökning av livsmedel</h1>

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

</div>

<br>

我想使用以下代码从数组中添加内容：

// Work with the response
success: function(response) {
    console.log(response); // server response

    var livsmedelArray = response.livsmedel;

    var table = $("#tabell");

    console.log(livsmedelArray);


    // Itererar genom samtliga rader i resultatet

    $.each(livsmedelArray, function(i, livsmedelArray) {

        // Skapar en tabellrad för varje apotek och hämtar ut respektive 
        // attribut för det aktuella apoteket och lägger in cellerna i tabellraden

        $('<tr><td>' + livsmedelArray.namn + '</td>' +
            '<td>' + livsmedelArray.energi + '</td>' +
            '<td>' + livsmedelArray.kolhydrater + '</td>' +
            '<td>' + livsmedelArray.protein + '</td>' +
            '<td>' + livsmedelArray.fett + '</td>'

            +
            '</tr>').appendTo(table);

        $("#tabell").show;

    });

}

然而它不起作用，我不知道它为什么没有！

Answer 1

希望你的ajax成功＆amp;回答是正确的。如果是这样，那么您可能需要定位tbody以附加tr

您可以尝试使用此代码段

var trElement = '';
$.each(livsmedelArray, function(i, livsmedelArray) {

  // Skapar en tabellrad för varje apotek och hämtar ut respektive 
  // attribut för det aktuella apoteket och lägger in cellerna i tabellraden

  trElement += $('<tr><td>' + livsmedelArray.namn + '</td>' +
    '<td>' + livsmedelArray.energi + '</td>' +
    '<td>' + livsmedelArray.kolhydrater + '</td>' +
    '<td>' + livsmedelArray.protein + '</td>' +
    '<td>' + livsmedelArray.fett + '</td>'+
    '</tr>').
});
$('#tabell tbody').append(trElement)

此处trElement变量位于each函数之外。您可以在success函数内声明它或作为单独的变量声明。

dom操作也很昂贵，因此，您可以创建tr(s)＆amp;的完整对象。马上追加它。

希望这会有用

Answer 2

你应该追加身体.. 试试这个

var table = $("#tabell tbody");

*************** EDIT ***************

我不确定你的其他代码，所以为什么不试试这个..

var block = "";

$.each(livsmedelArray, function(i, livsmedelArray) {

 block+='<tr><td>' + livsmedelArray.namn + '</td>' +
            '<td>' + livsmedelArray.energi + '</td>' +
            '<td>' + livsmedelArray.kolhydrater + '</td>' +
            '<td>' + livsmedelArray.protein + '</td>' +
            '<td>' + livsmedelArray.fett + '</td>'+
        '</tr>';

});

table.html(block);

Answer 3

试试吧......

// Work with the response
success: function(response) {
    console.log(response); // server response

    var livsmedelArray = response.livsmedel;

    var table = $("#tabell");

    console.log(livsmedelArray);


    // Itererar genom samtliga rader i resultatet

    $.each(livsmedelArray, function(i, livsmedelArray) {

        // Skapar en tabellrad för varje apotek och hämtar ut respektive 
        // attribut för det aktuella apoteket och lägger in cellerna i tabellraden

        $('<tr><td>' + livsmedelArray.namn + '</td>' +
            '<td>' + livsmedelArray.energi + '</td>' +
            '<td>' + livsmedelArray.kolhydrater + '</td>' +
            '<td>' + livsmedelArray.protein + '</td>' +
            '<td>' + livsmedelArray.fett + '</td>'

            +
            '</tr>').appendTo("#tabell");

        $("#tabell").show;

    });

}

Answer 4

在脚本中，我们只需要替换.appendTo（table）;与.appendTo（'table'）;

我们可以用下面提到的脚本替换上面的脚本：

success: function (response) {
    console.log(response);
    var livsmedelArray = response.livsmedel;
    var table = $("#tabell");
    console.log(livsmedelArray);    
    $.each(livsmedelArray, function (i, livsmedelArray) {       
        $('<tr><td>' + livsmedelArray.namn + '</td>'
        + '<td>' + livsmedelArray.energi + '</td>'
        + '<td>' + livsmedelArray.kolhydrater + '</td>'
        + '<td>' + livsmedelArray.protein + '</td>'
        + '<td>' + livsmedelArray.fett + '</td>'
        + '</tr>').appendTo('table');
        $("#tabell").show;
    });
}

预定义表头，从数组中添加行

4 个答案: