打印出來Javascript數組表

我有此數組：打印出來Javascript數組表

var employees = [ 
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName": "Jones" } 
];

，我想打印整個數組作爲一個HTML表格。我將如何實現這一目標？

我試過，但只能得到最終的名稱的打印：

<!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>

來源

2012-08-14 Mike

你迭代這個數組並創建相應的DOM元素，或者你使用模板引擎...... – 2012-08-14 18:38:53

......這確實是給你的。 – TheZ 2012-08-14 18:39:22

這不是JSON。 – davidbuzatto 2012-08-14 18:42:03

使用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/

來源

2012-08-14 18:48:24 davidbuzatto

如果您只是想遍歷HTML頁面上已有的表格並將其寫入底部，該怎麼辦？如何將表格數據附加到已存在的Web文檔？ – 2014-03-03 21:27:20

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);

來源

2012-08-14 18:47:31

可重複使用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));

來源

2016-05-31 13:06:33 Redu

打印出來Javascript數組表

回答

相關問題