Question

我正在尝试将对象添加到这组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”
将名称放在第一列中，takeOffice放在第二列中，和leftOffice在第三栏。

到目前为止，这已经接近我了：

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

Answer 1

您当前的代码

ID元素

让我们先看看你出错的地方：

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>

在ID为innerHTML的{{1}}元素上调用div会产生以下结果：

example

您还可以分配这些属性（更新该元素的相应HTML），但这并不总是最好的想法（出于安全考虑），尤其是在生产环境中。对于大学课程或仅仅是一个简单的爱好项目，现在就足够了。

分配值

document.getElementById('example').innerHTML; // 'This is an example document.'
document.getElementById('example').outerHTML; // '<div id="example">This is an example document.</div>'

在这里，你不是添加到标题行（它使它变得混乱并且不会产生预期结果），而是实际上做了一些完全不同的事情 - 你已经将各种变量变成了其他变量。

一元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运算符：

+=

但是，由于您需要将此内容写入HTML而不是仅使用JavaScript变量，因此您实际需要做的是将新行添加到表中，而不是覆盖变量。这可以使用DOM完成 - 如果您需要更多帮助，可以使用大量的参考指南和教程。

你的数组

var a = 'test';
a += ' string';
a; // 'test string'

您已获得的任务请求参数的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

我已经在JSFiddle上放了一个实际的例子 - JSFiddle允许其他人展示示例并根据需要更改它们。

Answer 2

可以使用 innerhtml 属性设置元素内容，而不是

x += presArray[i].name

应该阅读

document.getElementById('President').innerHTML = presArray[i].name

此外，您的html th 元素应具有总统的ID，以使其正常工作..

将数组对象添加到HTML表

2 个答案:

您当前的代码

ID元素

分配值

你的数组

示例代码