通过 jQuery/ajax 数组打印表格答案

【问题标题】：Print table via jQuery/ajax array通过 jQuery/ajax 数组打印表格
【发布时间】：2023-04-03 10:06:01
【问题描述】：

我正在尝试在 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>

【问题讨论】：

你想要的结果是什么？
我可以在这里发一张截图让你看看吗？
是的，任何可以帮助他人识别您的问题的东西。我可以看看你的完整 jquery 代码吗？
我上传了上面的截图请检查。为什么第二次循环运行时文本不进入下一行
在开头和结尾添加 tr。

标签： jquery arrays ajax

【解决方案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 匹配的消息。

【讨论】：

当我复制粘贴此代码时，它会在控制台中出现错误。 jquery.js:1586 未捕获的错误：语法错误，无法识别的表达式： Sell 1.1261261261261262 888 995

【解决方案2】：

您错过了代码中的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(""));

【讨论】：

请见上图
你的表结构有问题。你能更新表格的代码吗，我的意思是 <thead> ，和一切。如果可能的话，也包括你的 CSS
它适用于静态数据，甚至适用于 php 循环，只是在代码中添加时出错
检查你的DOM是否排列正确。当 DOM 没有很好地安排时，就会发生这种不同步的问题。如果用你的代码更新我

【解决方案3】：

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

【讨论】：

请提供一个jsfiddle或者代码sn-p for JS+HTML+CSS是可能的。
尝试在表的tbody 中使用.append。 $('. table > tbody:last-child').append(jsonResult);
它工作正常，但每次运行时，它都会在表格末尾添加数据，但我想在再次发布之前清除数据
请使用POST请求结构发布/编辑您的代码。
POST前使用$(".table > tbody").html("");清除数据