的原因

Question

我正在尝试使用以下代码正确显示表格。问题是在for循环将数据输入表之前应用</tbody>和</table>标记。表头显示正常，数据显示也很好，只是不在表中。我究竟做错了什么？我尝试使用if语句将最后一行移动到循环中，但同样的情况也是如此。

    $.getJSON("adriver.php?type=get", function(data, status){
    document.getElementById("aRightContent").innerHTML =
            "<table class='table table-hover'>" +
            "<thead>" +
            "<tr>" +
                "<th><i class='fa fa-check-square'></iclass></th>" +
                "<th>ID</th>" +
                "<th>Firstname</th>" +
                "<th>Lastname</th>" +
                "<th>UserName</th>" +
            "</tr>" +
            "</thead>" +
            "<tbody>";

    for(var i = 0; i < data.length; i++){
        document.getElementById("aRightContent").innerHTML +=
                "<tr>" +
                    "<td><input type='radio' name='selectedDriver' value='" + data[i].dID + "'></td>" +
                    "<td>" + data[i].dID + "</td>" +
                    "<td>" + data[i].dFirstName + "</td>" +
                    "<td>" + data[i].dLastName + "</td>" +
                    "<td>" + data[i].dUsername + "</td>" +
                "</tr>";
    }
    document.getElementById("aRightContent").innerHTML += "</tbody></table>";
});

感谢您的帮助。

Answer 1

只需在字符串中写下整个内容：

var htmlString = "<table class='table table-hover'>" +
        "<thead>" +
        "<tr>" +
            "<th><i class='fa fa-check-square'></iclass></th>" +
            "<th>ID</th>" +
            "<th>Firstname</th>" +
            "<th>Lastname</th>" +
            "<th>UserName</th>" +
        "</tr>"
        "</thead>" +
        "<tbody>";

等等......

然后使用，最后与innerHTML = htmlString签约。

的原因

您不应该将document.getElementById("aRightContent").innerHTML分配给不完整的HTML代码。

Answer 2

您无法使用<table>添加部分</table>和innerHTML，因为浏览器会为您填写。我建议的最佳方法是构建整个HTML然后追加。

所以你应该有类似的东西：

finalHTML = "<table class='table table-hover'>" +
        "<thead>" +
        "<tr>" +
            "<th><i class='fa fa-check-square'></iclass></th>" +
            "<th>ID</th>" +
            "<th>Firstname</th>" +
            "<th>Lastname</th>" +
            "<th>UserName</th>" +
        "</tr>"
        "</thead>" +
        "<tbody>";
finalHTML += "..."  // Other code.

此外，由于您使用的是jQuery，因此请使用相同的组件。而不是document.getElementById("aRightContent").innerHTML，请使用：

$("#aRightContent").html()

使用innerHTML的javascript引导表

2 个答案:

的原因