使用 JavaScript/jQuery 在 HTML 表格中显示数据答案

【问题标题】：Display data in an HTML table using JavaScript/jQuery使用 JavaScript/jQuery 在 HTML 表格中显示数据
【发布时间】：2014-02-18 19:46:53
【问题描述】：

我有如下 JSON 响应。

"result": [
    [1, 0.10, 1.00],
    [2, 0.20, 2.00],
    [3, 0.30, 3.00],
    [4, 0.40, 4.00],
    [5, 0.50, 5.00],
    [6, 0.60, 6.00],
    [7, 0.70, 7.00],
    [8, 0.80, 8.00],
    [9, 0.90, 9.00],
    [10, 1.00, 10.00],
    [11, 1.10, 11.00],
    [12, 1.20, 12.00],
    [13, 1.30, 13.00],
    [14, 1.40, 14.00],
    [15, 1.50, 15.00],
    [16, 1.60, 16.00],
    [17, 1.70, 17.00],
    [18, 1.80, 18.00]
]

这对应于 Java 中的 java.util.List<Object[]>。

响应由以下 JavaScript/jQuery 函数接收。

var timeout;
var request;

$(function () {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function(e, xhr, options) {
        xhr.setRequestHeader(header, token);
    });
});

$(document).ready(function(){
    $("#zoneCharge").change(function(){
        if(!request)
        {
            request = $.ajax({
                datatype:"json",
                type: "POST",
                data: JSON.stringify({jsonrpc:'2.0', method:'getZoneCharges', id:'jsonrpc', params:[$("#zoneCharge").val()]}),
                contentType: "application/json-rpc; charset=utf-8",
                url: "ZoneChargeList",
                success: function(response)
                {
                    var list=response.result;
                    var tempWeight='';
                    $('#dataTable').remove();
                    var $table = $("<table id='dataTable' cellpadding='0' cellspacing='0' width='100%'>").appendTo($('#zoneChargeList'));

                    $('<tr>').appendTo($table)
                    //.append($("<th style='width: 96px;'>").text("Weight"))
                    //.append($("<th style='width: 96px;'>").text("Charge"))
                    .append($("<th style='width: 96px;'>").text("Weight"))
                    .append($("<th style='width: 96px;'>").text("Charge"));

                    $.each(list, function(index, list) {
                        list[2]===null||list[2]===undefined||list[2]===''||isNaN(list[2])?tempWeight='':tempWeight=list[2].toFixed(2);
                        $('<tr>').appendTo($table)
                        .append($('<td>').text(list[1]))
                        .append($("<td><input type='text' name='txtCharge[]' value='"+tempWeight+"' onkeypress='return isNumberKey(event, this.value);'>"));

                    });
                },
                complete: function()
                {
                    timeout = request = null;
                },
                error: function(request, status, error)
                {
                    if(status!=="timeout"&&status!=="abort")
                    {
                        alert(status+" : "+error);
                    }
                }
            });
            timeout = setTimeout(function() {
                if(request)
                {
                    request.abort();
                    alert("The request has been timed out.");
                }
            }, 30000);
        }
    });
});

<span id="zoneChargeList"></span>

我想以<table> 格式以following 格式显示此数据列表。

成功处理程序中的$.each 函数当前以<table> 的following 格式显示此列表。

如何在四列的表格中显示此列表，如上面的等效快照所示？

_{当从<select> 中选择一个id 为zoneCharge 的项目时调用jQuery 函数}

【问题讨论】：

老实说，你可能会省去很多麻烦，比如datatables.net
不相关，但是... datatype -> dataType
我已将其更改为dataType、@KevinB。谢谢。

标签： javascript jquery html

【解决方案1】：

这样的东西应该可以工作（这里有一个小提琴来演示：http://jsfiddle.net/83d4w/5/）：

var newTr = null;
var resetTr = true;
$.each(list, function(index, list) {
    list[2]===null||list[2]===undefined||list[2]===''||isNaN(list[2])?tempWeight='':tempWeight=list[2].toFixed(2);
    if (!newTr) {
        // create new row
        newTr = $('<tr>');
        // do not reset it this time
        resetTr = false;
    } else {
        // we used the previous one so reset it this time
        resetTr = true;
    }
    newTr.appendTo($table)
        .append($('<td>').text(list[1]))
        .append($("<td><input type='text' name='txtCharge[]' value='"+tempWeight+"' onkeypress='return isNumberKey(event, this.value);'>"));

    if (resetTr) {
        // reset
        newTr = null;
    }
});

newTr 包含当前正在使用的tr 或为空。
resetTr 将决定我们是否在循环结束时重置 newTr。

[编辑]哦，当然你可以取消注释两个标题单元格

【讨论】：

【解决方案2】：

您必须将您的$.each 调用替换为实际的for 循环，然后在循环内为index 和index+1 创建td 标记。然后for 循环应该将索引增加 2 而不是 1。这样，您的循环基本上是为每个其他索引添加一行，并且每行放置两个索引。

【讨论】：