Question

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

 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"};

但是，我是网络开发人员的新手，我想要一些提示。感谢。

Answer 1

您可以遍历对象中的每个属性，然后为每个键/值对添加一个新的<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]);
}

Here is a working example

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

如果您要多次调用此函数，则每次填充前都要清除<div>元素：

$("div").empty();

Here is a more realistic example，其中显示了如何按需更新数据

从json对象创建水平描述列表

1 个答案: