这是一个 JSFiddle,它展示了如何在您的对象中打印数据:
http://jsfiddle.net/4PVr5/1/
还有代码:
HTML
<table id="table">
<tr>
</tr>
</table>
JAVASCRIPT
var object = {
publicationDate: "28-02-2014",
contracted: "Servicash - Equipamentos Electrónicos, Lda.",
contracting: "Banco de Portugal",
id: 994738,
objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro",
initialContractualPrice: "12.945,50 €",
signingDate: "28-02-2014"
};
for (var prop in object) {
// important check that this is objects own property
// not from prototype prop inherited
if(object.hasOwnProperty(prop)){
var td = document.createElement("td");
var strong = document.createElement("strong");
var text = document.createTextNode(prop + " - " + object[prop]);
strong.appendChild(text);
td.appendChild(strong);
document.getElementById("table").appendChild(td);
}
}
编辑更新到 angus_thermopylae:
我已经更新了 JSFiddle 来展示这个概念:http://jsfiddle.net/4PVr5/12/
然后,您可以在对象上拥有任意数量的属性,但只打印您定义的属性并按照您定义的顺序。您只需添加一个文本字符串,然后您就会得到另一个打印。
编辑更新:
我更新了代码以遵循表格标题。现在它直接添加它们并且还处理属性太少的对象。
HTML
<table id="table">
<thead>
<th id="publicationDate"></th>
<th id="contracted"></th>
<th id="contracting"></th>
<th id="id"></th>
<th id="objectBriefDescription"></th>
<th id="initialContractualPrice"></th>
<th id="signingDate"></th>
</thead>
<tbody>
</tbody>
</table>
JAVASCRIPT
var orderedObject = {
publicationDate: "28-02-2014",
contracted: "Servicash - Equipamentos Electrónicos, Lda.",
contracting: "Banco de Portugal",
id: 994738,
objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro",
initialContractualPrice: "12.945,50 €",
signingDate: "28-02-2014"
};
var unorderedObject = {
id: 994738,
objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro",
initialContractualPrice: "12.945,50 €",
signingDate: "28-02-2014",
publicationDate: "28-02-2014",
contracted: "Servicash - Equipamentos Electrónicos, Lda.",
contracting: "Banco de Portugal",
};
var toManyPropertiesObject = {
id: 994738,
objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro",
initialContractualPrice: "12.945,50 €",
signingDate: "28-02-2014",
publicationDate: "28-02-2014",
contracted: "Servicash - Equipamentos Electrónicos, Lda.",
contracting: "Banco de Portugal",
newProp: "ignored",
newProp1: "ignored",
newProp2: "ignored",
};
var toFewPropertiesObject = {
id: 994738,
objectBriefDescription: "Consumíveis de papel para tratamento de dinheiro",
initialContractualPrice: "12.945,50 €",
contracted: "Servicash - Equipamentos Electrónicos, Lda.",
contracting: "Banco de Portugal",
};
printObjectInTable(orderedObject, "table");
printObjectInTable(unorderedObject, "table");
printObjectInTable(toManyPropertiesObject, "table");
printObjectInTable(toFewPropertiesObject, "table");
function printObjectInTable(objectToIterate, tableID) {
var thChildren = document.getElementById(tableID).getElementsByTagName("th"),
childrenLength = thChildren.length,
tr = document.createElement("tr");
for (var i = 0; i < thChildren.length; i++) {
var th = thChildren[i];
// important check that this is objects own property
// not from prototype prop inherited
var td = document.createElement("td");
if (objectToIterate.hasOwnProperty(th.id)) {
td.appendChild(document.createTextNode(objectToIterate[th.id]));
}
tr.appendChild(td);
}
document.getElementById(tableID).getElementsByTagName("tbody")[0].appendChild(tr);
}