預定義的表頭，從陣列

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成功&迴應無誤。如果是這樣，那麼你可能需要針對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

你應該追加到身體.. 試試這個

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