Question

好的我从输入框中获得了一些搜索结果。我用keyup来获得结果。然后tis结果发送到AJAX，我想将它附加到表。我的问题是因为我使用追加我会得到多个表头如果我有更多的结果，另一方面我不能使用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附加到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);
        } 
      })
    }
  });

在AJAX中将JSON数据添加到表中

2 个答案: