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

Question

当我使用此代码时，所有信息仅显示在一列中。<tbody>此外，如果我使用 Google Chrome 进行检查，则会在 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。