1

我计划拥有的结构是一个水平描述列表，例如

 key    key2  ...

value  value2 ...

我的代码是：

html:

<dl class="horizonal_list">
  <dt>Key</dt>
  <dd>Value</dd>
</dl>
<dl class="horizonal_list">
  <dt>Another key</dt>
  <dd>Another value</dd>
</dl>
...

CSS：

dt, dd {
  margin-left: 15px;
  margin-right: 15px;
  text-align:center;
}

.horizonal_list {
float: left;
}

基本上，我想在上面的水平列表中显示一些从服务器检索然后发送到 JSON 对象的信息，如下所示：

var current_status = {"REFERENCE":"1000006",
                        "NUMBER":108,
                        "DESCRIPTION":"SC1B",
                        "CONFIRMATION":"155248",
                        "CREATION_DATE":15584,
                        "YEAR":2013,
                        "NDOQ":161,
                        "NEZC":"161",
                        "STATUS":"LI"};

但是，我对网络开发非常陌生，我想要一些提示。谢谢。

4

1 回答 1

2

您可以遍历对象中的每个属性，然后<dl>为每个键/值对添加一个新元素。

请注意，此示例 JQuery 用于将 html 附加到 DOM。

function addItem(key, value) {
    $("div").append('<dl class="horizonal_list"><dt>' + key + '</dt><dd>' + value + '</dd></dl>');
}

for (var key in current_status) {
    addItem(key, current_status[key]);
}

这是一个工作示例

在上面的示例中，<div>已用于表示<dl>将添加每个元素的空容器。这可能与您当前拥有的不同，因此您需要相应地进行更改。

如果您要多次调用此函数，您将希望<div>每次在填充之前清除该元素：

$("div").empty();

这是一个更实际的例子，它展示了如何按需更新数据。

于 2013-08-01T15:40:27.253 回答