Javascript 如何从Ajax调用json响应中更新HTML格式的表数据？

我最初显示一个表，其中包含从控制器发送的数据

然后我进行一个ajax调用，返回json数据，每分钟用新数据更新一次表。目前，它只更新第一行，使用ajax调用返回的json数组中的最后一项

我尝试了表行的唯一ID，但这不起作用，所以我很困惑

这是我的密码：

<script type="text/javascript">
        var update_data = function() {
            var data = {};
            $.ajax({
                url: '/Update',
                dataType: 'json',
                async: false,
                success: function(data) {
                    console.log('success' + data.date );
                    for(var i=0; i<data.ticker.length;i++){
                        $("#ticker").html("<a href='/ticker?ticker="+data.ticker[i].ticker+"'>"+data.ticker[i].ticker+"</a>");
                        $("#totalCount").html(data.ticker[i].total_count);
                        $("#positiveCount").html(data.ticker[i].positive_count);
                        $("#negativeCount").html(data.ticker[i].negative_count);
                        $("#neutralCount").html(data.ticker[i].neutral_count);
                        $("#avgTotalCount").html(data.ticker[i].avg_total);
                        $("#avgPositiveCount").html(data.ticker[i].avg_positive);
                        $("#avgNegativeCount").html(data.ticker[i].avg_negative);
                        $("#avgNeutralCount").html(data.ticker[i].avg_neutral);

                    }
                },
                error: function(data) {
                    console.log('failure' + msg );
                    //need to traverse to success and if false, do something
                }
            });

            //your jQuery ajax code
        };

        var interval = 1000 * 60 * .1; // where X is your every X minutes

        setInterval(update_data, interval);
        update_data();
    </script>
    <table class="table table-striped sortable" style="width: 60%; float:left;">
        <td class="active countBoxHourTitle">Ticker</td>
        <td class="active countBoxTitle">Total</td>
        <td class="active countBoxTitle">Positive</td>
        <td class="active countBoxTitle">Negative</td>
        <td class="active countBoxTitle">Neutral</td>
        <td class="active countBoxTitle">Avg. Total</td>
        <td class="active countBoxTitle">Avg. Positive</td>
        <td class="active countBoxTitle">Avg. Negative</td>
        <td class="active countBoxTitle">Avg. Neutral</td>
        <%var i=0%>
        <% _.each(ticker, function (Tickerboard){ %>
        <tr>
        <%
            var total_change = Math.round(((ticker[i].total_count - ticker[i].yes_total)/ticker[i].yes_total)*100)
            var pos_change = Math.round(((ticker[i].positive_count - ticker[i].yes_pos)/ticker[i].yes_pos)*100)
            var neg_change = Math.round(((ticker[i].negative_count - ticker[i].yes_neg)/ticker[i].yes_neg)*100)
            var neut_change = Math.round(((ticker[i].neutral_count - ticker[i].yes_neut)/ticker[i].yes_neut)*100)
        %>
            <td class="active countBoxHour" id="ticker"><a href="/ticker?ticker=<%=ticker[i].ticker%>"><%=ticker[i].ticker%></a></td>
            <td class="success countBox" id="totalCount"><%=ticker[i].total_count%> (<%=total_change%>%)</td>
            <td class="success countBox" id="positiveCount"><%=ticker[i].positive_count%> (<%=pos_change%>%)</td>
            <td class="danger countBox" id="negativeCount"><%=ticker[i].negative_count%> (<%=neg_change%>%)</td>
            <td class="success countBox" id="neutralCount"><%=ticker[i].neutral_count%> (<%=neut_change%>%)</td>
            <td class="success countBox" id="avgTotalCount"><%=ticker[i].avg_total%></td>
            <td class="success countBox" id="avgPositiveCount"><%=ticker[i].avg_positive%></td>
            <td class="danger countBox" id="avgNegativeCount"><%=ticker[i].avg_negative%></td>
            <td class="success countBox" id="avgNeutralCount"><%=ticker[i].avg_neutral%></td>
        </tr>
        <%i++%>
        <%})%>

    </table>

var update_data=函数（）{
变量数据={}；
$.ajax({
url:“/Update”，
数据类型：“json”，
async:false，
成功：功能（数据）{
console.log（'success'+data.date）；
对于（var i=0；i只显示最后一个条目，因为
html（）
会覆盖其中的任何内容。您需要执行类似于
$（“#totalCount”）.html（data.ticker[i].total_count+$（“#totalCount”）.html（）；
的操作，以便在末尾附加旧的html

编辑：最好使用dreamweiver的建议：
$（“#totalCount”）.append（data.ticker[i].total_count）；
只显示最后一个条目，因为
html（）
会覆盖其中的任何内容。您需要执行类似于
$（“#totalCount”）.html（data.ticker[i].total_count+$（“#totalCount”）的操作.html（））；
将旧html追加到末尾

编辑：最好使用dreamweiver的建议：
$（“#totalCount”）.append（data.ticker[i].total_count）；
您需要使用
class
代替
id
，因为
id
必须是唯一的

<td class="active countBoxHour ticker">...</td>
<td class="success countBox totalCount">...</td>
<td class="success countBox positiveCount">...</td>
<td class="danger countBox negativeCount">...</td>
<td class="success countBox neutralCount">...</td>
<td class="success countBox avgTotalCount">...</td>
<td class="success countBox avgPositiveCount">...</td>
<td class="danger countBox avgNegativeCount">...</td>
<td class="success countBox avgNeutralCount">...</td>

。。。
...
...
...
...
...
...
...
...

改变你的循环

for(var i=0,len=data.ticker.length; i<len;i++){
    $(".ticker:eq("+i+")").html("<a href='/ticker?ticker="+data.ticker[i].ticker+"'>"+data.ticker[i].ticker+"</a>");
    $(".totalCount:eq("+i+")").html(data.ticker[i].total_count);
    $(".positiveCount:eq("+i+")").html(data.ticker[i].positive_count);
    $(".negativeCount:eq("+i+")").html(data.ticker[i].negative_count);
    $(".neutralCount:eq("+i+")").html(data.ticker[i].neutral_count);
    $(".avgTotalCount:eq("+i+")").html(data.ticker[i].avg_total);
    $(".avgPositiveCount:eq("+i+")").html(data.ticker[i].avg_positive);
    $(".avgNegativeCount:eq("+i+")").html(data.ticker[i].avg_negative);
    $(".avgNeutralCount:eq("+i+")").html(data.ticker[i].avg_neutral);
}

for（var i=0，len=data.ticker.length；i您需要使用
class
代替
id
，因为
id
必须是唯一的

<td class="active countBoxHour ticker">...</td>
<td class="success countBox totalCount">...</td>
<td class="success countBox positiveCount">...</td>
<td class="danger countBox negativeCount">...</td>
<td class="success countBox neutralCount">...</td>
<td class="success countBox avgTotalCount">...</td>
<td class="success countBox avgPositiveCount">...</td>
<td class="danger countBox avgNegativeCount">...</td>
<td class="success countBox avgNeutralCount">...</td>

。。。
...
...
...
...
...
...
...
...

改变你的循环

for(var i=0,len=data.ticker.length; i<len;i++){
    $(".ticker:eq("+i+")").html("<a href='/ticker?ticker="+data.ticker[i].ticker+"'>"+data.ticker[i].ticker+"</a>");
    $(".totalCount:eq("+i+")").html(data.ticker[i].total_count);
    $(".positiveCount:eq("+i+")").html(data.ticker[i].positive_count);
    $(".negativeCount:eq("+i+")").html(data.ticker[i].negative_count);
    $(".neutralCount:eq("+i+")").html(data.ticker[i].neutral_count);
    $(".avgTotalCount:eq("+i+")").html(data.ticker[i].avg_total);
    $(".avgPositiveCount:eq("+i+")").html(data.ticker[i].avg_positive);
    $(".avgNegativeCount:eq("+i+")").html(data.ticker[i].avg_negative);
    $(".avgNeutralCount:eq("+i+")").html(data.ticker[i].avg_neutral);
}

for（var i=0，len=data.ticker.length；更简单的方法是使用
.append（）
$（“#totalCount”）.append（data.ticker[i].total_count）；
.REF:我尝试了下面的建议，效果很好。我正在尝试。append（）早些时候，它不能正常工作。它只是在整个列和行中追加，并且没有正确显示。更简单的方法是，使用
.append（）
$（“#totalCount”）.append（data.ticker[i].total_count）；
.REF:我尝试了下面的建议，它成功了。我正在尝试。append（）它只是在整个过程中为该列和该行追加数据，因此无法正确显示。