javascript - 使用 innerHTML 的 javascript Bootstrap 表

Question

我正在尝试使用以下代码让表格正确显示。问题是 </tbody>和 </table>在 for 循环将数据输入表之前应用标签。表头显示正常，数据也显示正常，只是不在表中。我究竟做错了什么？我尝试使用 in 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

您不能添加部分 <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()