javascript - 使用 javascript 在表格单元格中插入数组值

Question

我需要在表中插入一些值。所有值都包含在 Ajax/php 请求返回的数组中，如下所示:

var data = [];

//Consider that the number of the object (in this case only 3) obtained from the server are equal to the number of rows in tbody (6 rows in tbody = 6 object from server).

data[0] = {From: '01/01/2012', To: '01/01/2013', Interest: 80.00, Residual: 0, Capital: 1000.00, Days: 366};
data[1] = {From: '01/01/2013', To: '01/01/2014', Interest: 85.00, Residual: 0, Capital: 980.00, Days: 365};
data[2] = {From: '01/01/2014', To: '29/04/2014', Interest: 20.00, Residual: 75.00, Capital: 980.00, Days: 118};

解释如何将值插入表中有点棘手，所以我用我想要得到的结果创建了一个 fiddle 。我不期望你给我最终结果(当然，我会很受欢迎:))，但至少有一些开始的想法。

<强> FIDDLE

**编辑

我将 id 分配给单元格，现在所有值都已正确插入。这就是更新后的fiddle，你觉得代码还可以写得更优雅吗？

<强> UPDATE FIDDLE

Answer 1

我可以看到ajax/php请求返回的数据是JSON格式的。因此，要将它们插入 HTML 表中，您可以使用 JQuery .

示例(如您提供的示例数据):

function buildDataTableHtml(data){
    var tableHtml = "<table><tr>";
    tableHtml += "<th>From</th>";
    tableHtml += "<th>To</th>";
    tableHtml += "<th>Interest</th>";
    tableHtml += "<th>Residual</th>";
    tableHtml += "<th>Capital</th>";
    tableHtml += "<th>Days</th>";
    tableHtml += "</tr>";

    $.each(data, function(i, v){
        tableHtml += "<tr>";
        tableHtml += "<td>" + v.From + "</td>";
        tableHtml += "<td>" + v.To + "</td>";
        tableHtml += "<td>" + v.Interest + "</td>";
        tableHtml += "<td>" + v.Residual + "</td>";
        tableHtml += "<td>" + v.Capital + "</td>";
        tableHtml += "<td>" + v.Days + "</td>";
        tableHtml += "</tr>";
    });
    tableHtml += "</table>";

    return tableHtml;
}

如果您使用此 JavaScript 函数(以及 JQuery)，则此函数将返回您想要的表格的 HTML。希望这对您有帮助

注意:我只是将其写在答案框中，并没有尝试确保这是否有效。但希望代码能够工作。 :)