使用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中的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>

我希望以following格式在<table>中显示此数据列表。

---

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

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

_{从id zoneCharge为{{1}}}

的{{1}}中选择项目时，会调用jQuery函数

Answer 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。

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

Answer 2

您必须使用实际的$.each循环替换for来电，然后在循环中为td创建index代码并{ {1}}。然后index+1循环应该将索引增加2而不是1.这样，你的循环基本上为每个其他索引添加一行，并且每行放两个索引。