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

Question

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

<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 成功并且回复正确。如果是这样，那么您可能需要定位 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) 的完整对象并立即附加它。

希望这会有用

Answer 2

你应该附加到 body.. 试试这个

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

***************编辑***************

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

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

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

Predefined table head, add rows from array

javascript

jquery

jsonp