使用对象/数组创建动态表和poplate-仅限JavaScript
我正在尝试编写一个JavaScript函数，它接受下面的对象作为参数，并返回一个包含以下列的HTML表：“First Name”、“Last Name”、“Age”、“Color”。该表应该有4行。空值应显示为“不适用” 到目前为止，在我的搜索中，我没有找到一个处理如上所述格式的对象数组的示例。请注意整个数据数组是如何用括号括起来的 有人能帮忙吗，或者举个例子使用对象/数组创建动态表和poplate-仅限JavaScript,javascript,arrays,object,Javascript,Arrays,Object,我正在尝试编写一个JavaScript函数，它接受下面的对象作为参数，并返回一个包含以下列的HTML表：“First Name”、“Last Name”、“Age”、“Color”。该表应该有4行。空值应显示为“不适用” 到目前为止，在我的搜索中，我没有找到一个处理如上所述格式的对象数组的示例。请注意整个数据数组是如何用括号括起来的 有人能帮忙吗，或者举个例子 第二部分 好的，我已经做了一些修改，下面是我到目前为止所做的（仅尝试使用Javascript） window.onload=show
第二部分 好的，我已经做了一些修改，下面是我到目前为止所做的（仅尝试使用Javascript）
window.onload=showData//调用函数加载数据..可以改为将onload添加到body标记
变量_数据=[{
名字：“约翰”，
姓氏：“Doe”，
年龄:"40岁",，
颜色：“蓝色”
}, {
名字：“简”，
姓氏：“Doe”，
年龄:"38岁",，
颜色：“粉色”
}, {
名字：“杰克”，
姓氏：“Doe”，
年龄:"10岁",，
颜色：空
}, {
名字：“吉尔”，
姓氏：“Doe”，
年龄:"8岁"，
颜色：空
}]; //新的对象数组。
函数showData（）
{
//用于查看是否有值的函数，如果有，则显示值，如果没有，则显示n/a。
函数checkForVal（val）{
返回val | |‘不适用’；
}
var-str；
str=“”；
str+=“名字姓氏最喜欢的颜色”；
对于（变量i=0；i<\u data.length；i++）{
var brows=_数据[i]；
str+=“”+checkForVal（brows.first\u name）+“”+checkForVal（brows.last\u name）+“”+checkForVal（brows.age）+“”+checkForVal（brows.color）+“”；
}
str+=”；
var-tableReady=str；
var tableContainer=document.getElementById（“tableContainer”）；
tableContainer.innerHTML=tableReady；
}
这是可行的，但我真的希望找到一个更好的解决方案，一个更面向面向对象或脚本更好的解决方案。我想再次将这个对象数组（按原样）传递给一个函数，然后该函数将数据解析为一个表。如果有人想尝试改进它，我们将不胜感激。这是一个对象数组 您可以像这样访问元素 _data[0]["first_name"] // will give you "John" _数据[0][“名字”]//将为您提供“John”
以此类推。用方括号括起来是它成为一个数组的原因。你能给我们一个ASCII表，显示处理该数组后的输出应该是什么吗？您是否实现了任何功能？是的，我查阅了如何使用JavaScript动态创建表，并对对象数组进行了一些初步测试。我只是希望能找到一个很好的例子来学习，研究这一点有很多方法可以做这类事情，但没有一种方法能完全满足我的需要。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="tableContainer"></div>
<script>
window.onload = showData;//a call to the function to load the data..could add onload to body tag instead
var _data = [{
first_name: "John",
last_name: "Doe",
age: "40",
color: "Blue"
}, {
first_name: "Jane",
last_name: "Doe",
age: "38",
color: "Pink"
}, {
first_name: "Jack",
last_name: "Doe",
age: "10",
color: null
}, {
first_name: "Jill",
last_name: "Doe",
age: "8",
color: null
}]; //new array of objects.
function showData()
{
//a function to see if has value, if it does then display the value, if not then display n/a.
function checkForVal(val) {
return val || 'n/a';
}
var str;
str = "<table>";
str += "<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Favorite Color</th></tr>";
for (var i = 0; i < _data.length; i++) {
var brows = _data[i];
str += "<tr><td>" + checkForVal(brows.first_name) + "</td><td>" + checkForVal(brows.last_name) + "</td><td>" + checkForVal(brows.age) + "</td><td>" + checkForVal(brows.color) + "</td></tr>";
}
str += "</table>";
var tableReady = str;
var tableContainer = document.getElementById("tableContainer");
tableContainer.innerHTML = tableReady;
}
</script>
</body>
</html>