将 JS 数组转换为 HTML 表 |奇怪的<tbody>标签

Convert a JS Array ìnto HTML Table | Weird <tbody> Tag?

本文关键字：tbody 标签 转换 数组 JS HTML      更新时间：2023-09-26

当我使用此代码时，所有信息仅显示在一列中。另外，如果我用谷歌浏览器检查，有很多<tbody>标签被添加到table.innerHTML。

http://puu.sh/4oLmM.png

如何使其水平显示标题和每个content[i]？

<table id="table1" border='"5'" cellpadding='"10'">
<script>
    var table = document.getElementById('table1');
    table.innerHTML = '';
    var header = ['Method','Gp/Exp','Exp/H']
    var content = [
        ['Kill',1,100],
        ['Die',42,1222],
        ['Yo',1,1245]       
    ]

    //Header
    table.innerHTML += '<tr>';
    for(var i in header){
        table.innerHTML += '<th>' + header[i] + '</th>';
    }
    table.innerHTML += '</tr>';
    //Content
    for(var i in content){
        table.innerHTML += '<tr>';
        for(var j in content[i]){
            table.innerHTML += '<td>' + content[i][j] + '</td>';
        }
        table.innerHTML += '</tr>';
    }
 </script>

我怀疑这就是伊恩的意思：

var html = '<tr>';
for(var i in header){
    html += '<th>' + header[i] + '</th>';
}
html += '</tr>';
for(var i in content){
    html += '<tr>';
    for(var j in content[i]){
        html += '<td>' + content[i][j] + '</td>';
    }
    html += '</tr>';
}
table.innerHTML = html;
你

这样做的方式是，你正在向元素添加格式错误的 HTML。整个字符串很好，但我的猜测是，每次你做table.innerHTML +=时，它都会意识到你正在创建一个狡猾的 HTML 字符串，并弄乱它以获得有效的 HTML 内容。

相关文章：