Javascript 使用JSON对象生成html表
我知道有很多类似的问题。这段代码是许多其他堆栈溢出问题的弗兰肯斯坦。但是我太接近了,我只是不理解我一直试图很好地使用示例的代码。 这是我的html页面:Javascript 使用JSON对象生成html表,javascript,html,json,html-table,Javascript,Html,Json,Html Table,我知道有很多类似的问题。这段代码是许多其他堆栈溢出问题的弗兰肯斯坦。但是我太接近了,我只是不理解我一直试图很好地使用示例的代码。 这是我的html页面: <!DOCTYPE html> <html> <script src="Scripts.js"></script> <script> </script> <head> <meta http-equiv="content
<!DOCTYPE html>
<html>
<script src="Scripts.js"></script>
<script>
</script>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
</head>
<body>
<p id="demo"></p>
<script>
obj.Blades.forEach(element => {
var name = element.Name + " " + element.Damage;
document.write(name + "<br >");
});
</script>
<input type="button" value="Generate Table" onclick="makeTable()" />
<hr />
<div id="dvTable"></div>
</body>
</html>
obj.Blades.forEach(元素=>{
变量名称=元素。名称+“”+元素。损坏;
文件。写(名称+“
”);
});
下面是Java脚本页面:
var jsonStuff = '{ "Blades" : [' +
'{ "Name":"Longsword" , "Damage":"l2d" },' +
'{ "Name":"Dagger" , "Damage":"l3d" },' +
'{ "Name":"Mace" , "Damage":"l4d" },' +
'{ "Name":"Spear" , "Damage":"l5d" } ]}';
var obj = JSON.parse(jsonStuff);
function makeTable(){
//Create a HTML Table element.
var table = document.createElement("TABLE");
table.border = "1"
//Get the count of columns.
var columnCount = Object.keys(obj.Blades).length;
//Add the header row.
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = obj.Blades[i].Name;
row.appendChild(headerCell);
}
//Add the data rows.
for (var i = 1; i < obj.Blades.length; i++) {
row = table.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
console.log(obj.Blades[j].Damage);
var cell = row.insertCell(-1);
cell.innerHTML = obj.Blades[i][j];
}
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
var jsonstaff='{“刀片”:['+
“{”Name:“Longsword”,“Damage:“l2d”},”+
“{”Name:“匕首”,“伤害”:“l3d”},”+
“{”Name:“Mace”,“Damage:“l4d”},”+
“{”名称“:”矛“,”伤害“:”l5d“}]}”;
var obj=JSON.parse(jsonstaff);
函数makeTable(){
//创建一个HTML表元素。
var table=document.createElement(“表”);
table.border=“1”
//获取列的计数。
var columnCount=Object.keys(obj.Blades).length;
//添加标题行。
var行=table.insertRow(-1);
对于(变量i=0;i
这就是它现在的样子:
所以我知道问题一定出在JavaScript评论的“添加数据行”部分的某个地方。我现在知道该怎么做了。我相信你的问题在于线路:
cell.innerHTML = obj.Blades[i][j];
您将刀片视为一个二维数组,而实际上它是一个对象数组。为了避免未定义的问题,您需要这样做:
cell.innerHTML = obj.Blades[i].Name;
cell.innerHTML = obj.Blades[i].Damage;
浏览器的图像没有多大帮助。请打开浏览器的开发工具,查看浏览器中当前生成的HTML,看看有什么问题。是的,这很有帮助。不再是未定义的,但是正确的信息没有显示出来。谢谢你。