html表格内容动态显示,动态显示HTML表格内容

有一个问题，我无法弄清楚在这段代码中。 它应该迭代数组对象并将它们显示在HTML表格中。第三行应该包含按钮。为什么它不显示任何东西？动态显示HTML表格内容

HTML代码：

Name	Level	Action
	A B C

的Javascript：

var myArray = [{"name":"aaa","level":"A"},{"name":"bbb","level":"B"},{"name":"ccc","level":"C"}];

display();

function display() {

var length = myArray.length;

var htmltext = "";

for (var i = 1; i < length; i++) {

htmltext +=

"

\"+myArray[i].name+"\"+myArray[i].level+"\\

\

\

\

\";

}

document.getElementById("table-rows").innerHTML = htmltext;

}

+0

你可以追加“表格行”本身，因此你的行中有你不想要的行，添加一个''并添加到如果你想这样做。 –

A

回答

0

您需要使用ID引用表体，并且您的for循环应该将init初始化为0，以便遍历整个数组。

var myArray = [{

"name": "aaa",

"level": "A"

}, {

"name": "bbb",

"level": "B"

}, {

"name": "ccc",

"level": "C"

}];

display();

function display() {

var length = myArray.length;

var htmltext = "";

for (var i = 0; i < length; i++) {

htmltext +=

"

\" + myArray[i].name + "\" + myArray[i].level + "\\

\

\

\

\";

}

document.getElementById("table-rows").innerHTML = htmltext;

}

NameLevelAction

A

B

C

2017-05-26 16:39:31

Woodrow

0

而不是

document.getElementById("table-rows").innerHTML = htmltext;

尝试

document.getElementById("table-rows").append(htmltext);

2017-05-26 16:37:26

+0

[Node.append()](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append)不解析字符串。 –

-2

使用车把。 http://handlebarsjs.com/ 我自己将它用于动态表格。加上它的不好的做法插入html与js。

2017-05-26 16:49:46