javascript - 如何从我的 Ajax 调用 json 响应中更新 HTML 中的表数据？

Question

我最初显示一个表格，其中包含从我的 Controller 发送的数据。

然后，我进行一个 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>

我该怎么做？

Answer 1

您需要使用 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);
}