Предопределенная головка таблицы, добавить строки из массива

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

Надеюсь, что ваш аякс успешный & Ответ правильный. Если это так, то вам может понадобиться целевой 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 или как отдельная переменная.

Кроме того, манипуляция с объектом является дорогостоящей, поэтому вы можете создать полный объект tr(s) &, добавив его сразу.

Надеется, что это будет полезно

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