[英]Create complex table body structure using Javascript
Could anybody tell me how I can create this table using my function below?有人能告诉我如何使用下面的函数创建这个表吗?
<tbody>
<tr>
<td><h3>Main1</h3></td>
<td>
<h5>
text1
</h5>
</td>
<td>
<h5>
text2
</h5>
</td>
</tr>
<tr>
<td><h3>Main2</h3></td>
<td>
<h5>
text3
</h5>
</td>
<td>
<h5>
text4
</h5>
</td>
</tr>
</tbody>
Here are my data and my functions.这是我的数据和我的功能。 I can only create a table without the inner
h3, h5 tags
with it.我只能创建一个没有内部
h3, h5 tags
的表。
data =[['Main1', 'text1', 'text2'],['Main2', 'text3', 'text4']]
var table = document.getElementsByTagName("tbody")[0];
table.innerHTML = "";
for (var i = 0; i < data.length; i++) {
var child = data[i];
var row = table.insertRow();
Object.keys(child).forEach(function (k) {
var cell = row.insertCell();
cell.appendChild(document.createTextNode(child[k]));
Try using javascript string interpolation:尝试使用 javascript 字符串插值:
data =[['Main1', 'text1', 'text2'],['Main2', 'text3', 'text4']] var table = document.getElementsByTagName("tbody")[0]; table.innerHTML = ""; for (var i = 0; i < data.length; i++) { var row = table.insertRow(); row.innerHTML = `<tr><td><h3>${data[i][0]}</h3></td><td>${data[i][1]}</td><td>${data[i][2]}</td></tr>`; }
<table> <tbody> </tbody> </table>
But this attitude is quite obsolete, I strongly recomend using modern binding frameworks like Vue但是这种态度已经过时了,我强烈建议使用像Vue这样的现代绑定框架
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.