我正在尝试将对象添加到这组 HTML 代码中。
<div id="output">
<table id="presidents">
<tr>
<th>President</th><th>Took office</th><th>Left office</th>
</tr>
</table>
</div>
写一个函数 displayTable(presidents) 接受一个数组 总统反对。每个总统对象都有属性名称， takeOffice, leftOffice.
为每位总统在表中添加一行，id 为“presidents”
- 将名字放在第一列，将办公室放在第二列， 并在第三列离开办公室。
到目前为止，这是我所得到的最接近的结果:
var x = document.getElementById('President');
var y = document.getElementById('Took Office');
var z = document.getElementById('Left Office');
function displayTable(presidents) {
var presArray = [{
name: 'W',
tookOffice: '2000',
leftOffice: '2008'
}, {
name: 'Obama',
tookOffice: '2008',
leftOffice: '2016'
}];
for (var i = 0; i < presArray.length; i++) {
x = +presArray[i].name;
y = +presArray[i].tookOffice;
z = +presArray[i].leftOffice;
}
}
最佳答案
您当前的代码
ID元素
让我们先看看您哪里出错了:
var x = document.getElementById('President');
var y = document.getElementById('Took Office');
var z = document.getElementById('Left Office');
您将每个 header 视为 ID - 唯一具有 ID 的是表，因为它具有
<table id="presidents">
作为属性。因为无论如何您都必须创建一个新行，所以这不是正确的方法。如果那是 确实 ID 对应于表格标题的情况，那么您只是在覆盖标题，这当然是错误的。当你运行 document.getElementById 时会发生什么，传递一个存在的 ID，比如:
document.getElementById('presidents'); // capitalisation matters!
是返回一个代表 <table id="presidents"> 元素的 HTML 的 JavaScript 对象。使用此对象，您可以调用各种方法(例如 appendChild() )以及 innerHTML 和 outerHTML 等属性，它们返回元素的字符串化表示形式。
对于这样的示例 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
</head>
<body>
<div id="example">This is an example document.</div>
</body>
</html>
在 ID 为 innerHTML 的 div 元素上调用 example 将产生以下结果:
document.getElementById('example').innerHTML; // 'This is an example document.'
document.getElementById('example').outerHTML; // '<div id="example">This is an example document.</div>'
您还可以分配给这些属性(更新该元素的相应 HTML)，但是这并不总是最好的主意(出于安全考虑)，在生产环境中尤其糟糕。对于大学类(class)或只是一个简单的爱好项目，现在应该足够了。
赋值
for (var i = 0; i < presArray.length; i++) {
x = +presArray[i].name;
y = +presArray[i].tookOffice;
z = +presArray[i].leftOffice;
}
在这里，您没有添加到标题行(这会使它变得困惑并且不会产生预期的结果)，您实际上做了一些完全不同的事情 - 您已经将各种变量变成了其他东西。
一元 + 运算符(值或变量之前的 +，+ 左侧没有其他内容)实际上将值强制转换为数字，这意味着它将尝试将其转换为数字，如果不，让它成为 NaN(不是数字)。例如，查看这些:
var a = 'random text';
var b = '1234567890';
+1; // 1
+'fefefjejfj'; // NaN
+Infinity; // Infinity
+-Infinity; // -Infinity
+''; // 0
+null; // 0
+undefined; // NaN
+'1.1'; // 1.1
+window; // NaN
+a; // NaN
+b; // 1234567890
如果需要操作字符串，需要使用+=操作符:
var a = 'test';
a += ' string';
a; // 'test string'
但是，由于您需要将其写入 HTML 而不仅仅是使用 JavaScript 变量，因此您实际需要做的是将新行附加到表中，而不是覆盖变量。这可以使用 DOM 来完成 - 如果您需要更多帮助，那里有许多引用指南和教程。
你的数组
var presArray = [{
name: 'W',
tookOffice: '2000',
leftOffice: '2008'
}, {
name: 'Obama',
tookOffice: '2008',
leftOffice: '2016'
}];
给你的任务要求一个 presidents 变量作为参数。这意味着您应该在调用函数时传递数组，而不是在函数内部创建数组。
将数组作为参数传递的方法如下所示:
var x = [ { y: 1 } ];
function test(arg) { return arg[0].y; }
test(x); // 1
示例代码
这是我对要求的实现 - 了解它的工作原理并将其应用到您自己的工作中。
function displayTable(presidents) {
// get the table to add rows to
var table = document.getElementById('presidents');
// cycle through the array for each of the presidents
for (var i = 0; i < presidents.length; ++i) {
// keep a reference to an individual president object
var president = presidents[i];
// create a row element to append cells to
var row = document.createElement('tr');
// properties of the array elements
var properties = ['name', 'tookOffice', 'leftOffice'];
// append each one of them to the row in question, in order
for (var j = 0; j < properties.length; ++j) {
// create new data cell for names
var cell = document.createElement('td');
// set name of property using bracket notation (properties[j] is a string,
// which can be used to access properties of president)
cell.innerHTML = president[properties[j]];
// add to end of the row
row.appendChild(cell);
}
// add new row to table
table.appendChild(row);
}
}
我已经在 JSFiddle 上放置了一个活生生的例子——JSFiddle 允许其他人展示例子并根据他们的喜好改变它们。
关于javascript - 将数组对象添加到 HTML 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19903946/