Question

我在javascript中动态创建表。我也在起诉一些css代码来格式化表格。但是，我的代码没有获取任何格式。甚至不是最简单的，比如在桌子周围添加边框。这是我的代码：

function parseRequest_ls(response) {
    document.getElementById("files").innerHTML += "<table border='2'>";

    for(var i=0;i<5;i++){
        if(response.data[i].type == "folder" || response.data[i].type == "album") {
            document.getElementById("files").innerHTML += "<tr><td><b>+</b> <a href='#'>"+ response.data[i].name + "</a></td></tr>";
        }
    }
    document.getElementById("files").innerHTML += "</ul></table></div>";
}

CSS代码：

table, th, td {
    border: 2px solid;
    border-collapse: collapse;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}

caption {
    font-size: 150%;
    font-weight: bold;
    margin: 5px;
}

td, th {
    padding: 4px;
}

Answer 1

在你的功能中你有

document.getElementById("files").innerHTML += "<table border='2'>"; // first line

和

document.getElementById("files").innerHTML += "</ul></table></div>"; // last line

您已在最后一行放置了结束ul标记</ul>和结束div标记</div>但未对tag和{ul使用任何起始div {1}}因此HTML已被破坏，我认为您不应在ul内使用table而不将其包含在td内。所以在这种情况下你可以使用

function parseRequest_ls(response) {
    var trs='';    
    for(var i=0;i<5;i++){
        if(response.data[i].type == "folder" || response.data[i].type == "album") {
            trs +="<tr><td><b>+</b> <a href='#'>"+ response.data[i].name + "</a></td></tr>";
        }
    }
    document.getElementById("files").innerHTML += "<table border='2'>"+trs+"</table>";
}

A simple example

Answer 2

请勿将+=与innerHTML一起使用。首先在临时变量中构建一个字符串，然后在字符串中有一些完整（且有效）的HTML后，可以使用+=将其附加到元素。

Answer 3

所以问题是，我不能通过innerHTML创建表。我不得不使用DOM Object。我创建了一个DOM对象，然后使用createElement来获取表。有点不直接..但它工作..感谢所有你的建议虽然。：）

在Javascript中添加表样式

3 个答案: