Question

我正在尝试在jquery中打印数组，我希望它每4秒运行一次，并希望清除之前循环中写入的数据，然后在4秒后再次打印出来。但是它是在添加数据（行）而不是替换。

    function sendRequest(){
$.ajax({
    type: 'POST',
    url:'<?php echo site_url('ajax/ajax_buybtc'); ?>',
    success: 
    function(result){
        var jsonResult = JSON.parse(result);
        jsonResult.forEach(function(data) {
    var newTr = "<tr>";
   newTr += '<tr> <td style="text-align:center;"><a><span class="label label- 
   warning">Sell</span></a></td>';
   newTr += "<td>" + data.xbtc + "</td>";
   newTr += "<td>" + data.rate + "</td>";
   newTr += "<td>" + data.xpkr + "</td>";
   newTr += "</tr>";
   $('.table > tbody:last-child').append(newTr);
}); 



        setTimeout(function(){
            sendRequest(); //this will send request again and again;
        }, 4000);
    }
});
}

这是HTML部分

<table class="table table-striped table-condensed" style=" width:100%; float:left; border:3px solid white; box-shadow: 2px 2px 2px white">  
          <tbody>


                 <tr>
                  <td style="text-align:center;"><b>Action</b></td>
                  <td style="text-align:center;"><b>BTC</b></td>
                  <td style="text-align:center;"><b>BID</b></td>
                  <td style="text-align:center;"><b>PKR</b></td>
            </tr>



                 <tr class="messages">
                 <td style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>
                 <td  style="text-align:center;"></td>
                 <td  style="text-align:center;"></td>
                <td  style="text-align:center;"></td>
            </tr>

                 </tbody>
        </table>

Answer 1

您的代码中有一些错误。我帮你修理另外，我将class="messages"添加到tr标记中。

jsonResult.forEach(function(data) {
  var newTr = "";    // I delete the value to avoid double tr declaration
  newTr += '<tr class="messages"> <td style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>';
  newTr += "<td>" + data.xbtc + "</td>";
  newTr += "<td>" + data.rate + "</td>";
  newTr += "<td>" + data.xpkr + "</td>";
  newTr += "</tr>";
  $('.table tr.messages').remove();        // remove the existing one
  $('.table > tbody:last-child').append(newTr);
});

在添加新的tr之前，先删除带有类消息的现有tr。我将类名称声明为与您的HTML匹配的消息。

Answer 2

为表行添加 tr 。请参阅下面的更新代码。

var newTr = "<tr>";
newTr += "<tr> <td style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>";
newTr += "<td>" + data.xbtc + "</td>";
newTr += "<td>" + data.rate + "</td>";
newTr += "<td>" + data.xpkr + "</td>";
newTr += "</tr>";

$('.table > tbody:last-child').append(newTr);

Answer 3

您错过了代码中的tr。现在尝试这个：

jsonResult.push('<tr><td style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>');
        jsonResult.push("<td>" + data.xbtc + "</td>");
        jsonResult.push("<td>" + data.rate + "</td>");
        jsonResult.push("<td>" + data.xpkr + "</td></tr>");

});
    $(".messages").html(jsonResult.join(""));

通过jQuery / ajax数组打印表

3 个答案: