您当前的代码
标识元素
让我们先看看你哪里出错了：
var x = document.getElementById('President');
var y = document.getElementById('Took Office');
var z = document.getElementById('Left Office');
您将每个标题视为 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>
innerHTML使用ID调用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），但这并不总是最好的主意（由于安全问题），在生产环境中尤其糟糕。对于大学课程或只是一个简单的爱好项目，现在应该就足够了。
赋值
for (var i = 0; i < presArray.length; i++) {
x = +presArray[i].name;
y = +presArray[i].tookOffice;
z = +presArray[i].leftOffice;
}
在这里，而不是添加到标题行（这使它变得混乱并且不会产生预期的结果），您实际上已经做了一些完全不同的事情 - 您已经将各种变量变成了其他东西。
一元运算+符（a+在值或变量之前，在 的左侧没有其他内容+）实际上将值强制转换为数字，这意味着它将尝试将其转换为数字，如果不是，则使其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允许其他人展示示例并根据需要更改它们。