javascript - 将 JS 数组转换为 HTML 表 |奇怪的 标签？

Question

当我使用此代码时，所有信息仅显示在一列中。另外，如果我检查谷歌浏览器，有很多 <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>

Answer 1

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

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。