将AJAX数据添加到AJAX中的表格

Question

好吧，我在输入框中有一些搜索结果。我用键控来获得结果。然后把结果发送给AJAX，并且我想把它附加到表格中。我的问题是因为我使用append我会得到多个表头，如果我有更多的结果，另一方面我不能使用HTML（），因为脚本使用循环，所以我只会得到一个结果。有人可以帮助我解决这个问题。我尝试这样的事情......

$("#search").keyup(function() 
    { 
     var value = $(this).val(); // varijabla iz input polja 
     // provera za minimalnu duzinu pretrage 
     if(value.length > 3) 
     { 
      $.ajax({ 
       type: "POST", 
       url: "crud/searching/", 
       data: { 'var' : value }, 
       dataType: "json", 
       success: function(response) 
       { alert(response); 
        $('#warning').html(response.msg);; 
        $('#result').html(''); 

        for(var i=0; i<response.result.length; i++) //petlja za pristup json 
        { 
         $('#result').append('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody><tr><td>'+ response.result[i].id +'</td><td>'+ response.result[i].naslov +'</td><td>'+ response.result[i].autor +'</td><td>'+ response.result[i].cena +'</td><td>'+ response.result[i].valuta +'</td></tr> </tbody></table> ');//dodavanje rezultata u div 

        }              
       } 
      }) 
     } 
    }); 

Answer 1

只需创建表一次，然后在循环追加tr s到其tbody

$('#warning').html(response.msg); 
if (response.result.length) { 
    var $table = $('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody></tbody></table>').appendTo($('#result').html('')); 
    var $tbody = $table.find('tbody'); 

    for (var i = 0; i < response.result.length; i++) //petlja za pristup json 
    { 
     $tbody.append('<tr><td>' + response.result[i].id + '</td><td>' + response.result[i].naslov + '</td><td>' + response.result[i].autor + '</td><td>' + response.result[i].cena + '</td><td>' + response.result[i].valuta + '</td></tr> '); //dodavanje rezultata u div 
    } 
} else { 
    $('#result').html('') 
} 

Answer 2

试试这个：

$("#search").keyup(function() 
    { 
    var value = $(this).val(); // varijabla iz input polja 
    // provera za minimalnu duzinu pretrage 
    if(value.length > 3) 
    { 
     $.ajax({ 
     type: "POST", 
     url: "crud/searching/", 
     data: { 'var' : value }, 
     dataType: "json", 
     success: function(response) 
     { alert(response); 
      $('#warning').html(response.msg); 
      // Store jQuery objects if used more than once 
      var $table = $('<table class="page-list">').appendTo($('#result')), 
      $thead = $('<thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead>').appendTo($table), 
      $tbody = $('<tbody>').appendTo($table); 
      innerHTML = ''; 

      for(var i=0; i<response.result.length; i++) //petlja za pristup json 
      { 
      innerHTML += '<tr><td>'+ response.result[i].id +'</td><td>'+ response.result[i].naslov +'</td><td>'+ response.result[i].autor +'</td><td>'+ response.result[i].cena +'</td><td>'+ response.result[i].valuta +'</td></tr>');//dodavanje rezultata u div 

      } 
      // Append to HTML only once, when you have the full HTML to append 
      $tbody.append(innerHTML); 
     } 
     }) 
    } 
    });