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

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

HTML代码：

Name	Level	Action
	A B C

Name

Level

Action

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

}

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

回答

您需要使用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

2017-05-26 16:39:31

Woodrow

而不是

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

尝试

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

2017-05-26 16:37:26

[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

html表格内容动态显示,动态显示HTML表格内容相关推荐

CSS 解决td里面内容太多把表格弄变形的原因，设置自动换行。
CSS 解决<td>里面内容太多把表格弄变形的原因,设置自动换行. 1 < style="word-break:break-all"> 例如div宽200 ...
如何将记事本转换.php,记事本怎么变成表格？电脑便签如何将记事内容转化成Excel表格...
敬业签是一个商务便签记事本软件,在便签中记事是以文本的形式进行保存,在便签附件中,可上传Excel格式的文档进行保存,那么写在便签中的多条记事内容,有没有办法生成Excel表格保存到电脑本地呢?便签记 ...
用java查询excel表格_如何把java查询出的内容导入到excel表格
展开全部 java查询出的内容导入到excel表格 /**导出数据为XLS格式 * @param fos * @param bo */ public void writeExcelBo(FileOut ...
mysql tableveiw与表格,javafx将数据库内容输出到tableview表格
一 .创建Fxml文件,用Javafx Scene Builder 编辑页面,创建tableview(表格)和tablecolum(表格中的列),并为其设置fxid: 二.生成fxml文件的控制类: ...
html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
计算机基础知识教程excel单元格拆分,电脑内怎么将excel表格中某个单元格的内容拆分至不同单元格里...
电脑内怎么将excel表格中某个单元格的内容拆分至不同单元格里当我们在使用电脑的时候,可以下载excel软件来处理数据文件,那么如果想要将一个单元格中的内容拆分到不同的单元格中的话,应如何操作呢?接 ...
PHPWord替换word模板内容时，存在表格，且不确定表格行数的处理方式
PHPWord替换word模板内容时,存在表格,且不确定表格行数的处理方式想得到的目标表格表格可能存在若干行,需要循环生成,插入到word模板中 word模板实现过程 1.Composer安装 ...
表格td的宽度不随内容自适应
表格td的宽度不随内容自适应在table上添加 style="table-layout:fixed;word-break:break-all;" 然后在相应的td上添加宽高即可. ...
php将文本文件中的内容呈现到一个表格中
网上有很多版本,我觉得都不是很全,整理了一个比较全的送给大家 <?php// 将文本文件中的内容呈现到一个表格中 // 1. 读取文件内容 // => 包含文本内容的字符串数据 $cont ...
elementui表格宽度适应内容_解决elementui表格操作列自适应列宽
业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作... 写死宽度时是这样的: 开始给操作列绑定宽度属性 :width=&quo ...

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

html表格内容动态显示,动态显示HTML表格内容相关推荐

最新文章

热门文章