Javascript 打印出表格中的Javascript数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11958641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print out Javascript array in table
提问by Mike
I have this array:
我有这个数组：
var employees = [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName": "Jones" }
];
and I would like to print the entire array out as a html table. How would I accomplish this?
我想将整个数组打印为 html 表。我将如何做到这一点？
I tried this but could only get the final name the print:
我试过了，但只能得到打印的最终名称：
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
var obj = eval ("(" + txt + ")");
for (i=0; i<txt.length; i++){
document.getElementById("fname").innerHTML=obj.employees[i].firstName
document.getElementById("lname").innerHTML=obj.employees[i].lastName
}
</script>
</body>
</html>
回答by Jo?o Silva
var table = document.createElement("table");
for (var i = 0; i < employees.length; i++) {
var row = table.insertRow(-1);
var firstNameCell = row.insertCell(-1);
firstNameCell.appendChild(document.createTextNode(employees[i].firstName));
var lastNameCell = row.insertCell(-1);
lastNameCell.appendChild(document.createTextNode(employees[i].lastName));
}
document.body.appendChild(table);
回答by davidbuzatto
Using jQuery you can do:
使用 jQuery，您可以执行以下操作：
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
// $.parseJSON will parse the txt (JSON) and convert it to an
// JavaScript object. After its call, it gets the employees property
// and sets it to the employees variable
var employees = $.parseJSON( txt ).employees;
var $table = $( "<table></table>" );
for ( var i = 0; i < employees.length; i++ ) {
var emp = employees[i];
var $line = $( "<tr></tr>" );
$line.append( $( "<td></td>" ).html( emp.firstName ) );
$line.append( $( "<td></td>" ).html( emp.lastName ) );
$table.append( $line );
}
$table.appendTo( document.body );
// if you want to insert this table in a div with id attribute
// set as "myDiv", you can do this:
$table.appendTo( $( "#myDiv" ) );
jsFiddle: http://jsfiddle.net/davidbuzatto/aDX7E/
jsFiddle：http: //jsfiddle.net/davidbuzatto/aDX7E/
回答by Redu
A reusable JSON to table conversion solution for objects in an array type of data structure. Object properties are inserted at the header cells and the values are inserted at the data cells. Sorry for my unorthodox indenting but it makes me feel comfortable with functional programming.
一种可重用的 JSON 到表转换解决方案，用于数组类型数据结构中的对象。对象属性插入标题单元格，值插入数据单元格。抱歉我的非正统缩进，但它让我对函数式编程感到很舒服。
var employees = [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName": "Jones" }
],
goods = [
{ "ID":"0001" , "Description":"Cool Table", "Price":"499" , "Color":"Green" },
{ "ID":"0002" , "Description":"Ceramic Vase", "Price":"120" , "Color":"Beige" },
{ "ID":"0003" , "Description":"Titanium Ashtray", "Price":"999" , "Color":"Titanium Color" },
{ "ID":"0004" , "Description":"Story Book", "Price":"1" , "Color":"Yellow" },
{ "ID":"0005" , "Description":"Chair", "Price":"120" , "Color":"Pink" }
],
tableMaker = o => {var keys = Object.keys(o[0]),
rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
: "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),rowMaker(keys,"th"));
return "<table>" + rows + "</table>";
};
document.write(tableMaker(employees));
document.write(tableMaker(goods));