javascript - 使用 JavaScript/jQuery 在 HTML 表格中显示数据

Question

我有一个如下所示的 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.util.List<Object[]>在 Java 中。

---

响应由以下 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> 中选择一个项目时调用 jQuery 函数谁的id是zoneCharge}

Answer 1

像这样的东西应该可以工作(这里有一个 fiddle 来演示: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 或者为 null。
• resetTr 将决定我们是否在循环结束时重置 newTr。

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