如何在 HTML 中包含数组内容？答案

【问题标题】：How to include array content in HTML?如何在 HTML 中包含数组内容？
【发布时间】：2011-05-17 16:53:43
【问题描述】：

我有这个代码

var users = result.users; // array

$("#dialog:ui-dialog").dialog("destroy");

$("#dialog-confirm").dialog({
    resizable: false,
    height: 140,
    modal: true,
    open: function() {
    $(this).children('div.dialog-text').replaceWith("<b>New text goes here</b>");
    },

    buttons: {
    "Okay": function() {
        $(this).dialog("close");
    },
    Cancel: function() {
        is_okay = 0;
        $(this).dialog("close");
    }
    }
});

其中数组包含的数据形式为

{"ss":"Sandra Schlichting","fn":"Full name"}

我想要完成的是以（为便于阅读而插入空格）的形式获取数组的内容

<table>
  <tr>  <td>Initials</td>  <td>Full Name         </td>  </tr>
  <tr>  <td>ss      </td>  <td>Sandra Schlichting</td>  </tr>
  <tr>  <td>fn      </td>  <td>Full name         </td>  </tr>
</table>

并将其替换为 <b>New text goes here</b> in

$(this).children('div.dialog-text').replaceWith("<b>New text goes here</b>");

据我所知，$.each() 应该用于此目的。

但我仍然不知道如何开始。

谁能帮帮我？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用 JS for-in 循环遍历它。

<table id='nameTable'>
  <tr>  <td>Initials</td>  <td>Full Name         </td>  </tr>
</table>

var names = {
    "ss": "Sandra Schlichting",
    "fn": "Full name"
};
var $table = $('#nameTable');
var row   = '';
for (name in names) {
    row += '<tr><td>' + name + '</td><td>' + names[name] + '</td></tr>';
}
$table.append(row)

这是一个小提琴：http://jsfiddle.net/exP2b/4/

【讨论】：

很好，但对于大量数据，我不建议在循环中执行.append。我会建立一个字符串并附加到外面。
@Gary 是的。推荐的方式是构建元素并一次性插入。更新答案，谢谢。

【解决方案2】：

function makeTable(users) {
    var result = '<table><tr><td>Initials</td><td>Full Name</td></tr>\n';
    $.each(users, function(index, value) {
        result += '<tr><td>' + index + '</td><td>' + value + '</td></tr>\n';
    });
    result += '</table>';
    return (result);
}

alert(makeTable({"ss":"Sandra Schlichting","fn":"Full name"}));

Working here
$.eachdocumentation

【讨论】：