Bootstrap table with javascript using innerHTML

Question

I am trying to get a table to display properly using the following code. The problem is that the </tbody> and </table> tags are being applied before the for loop enters the data into the table. The table head displays fine and the data displays fine as well, just not in the table. What am I doing wrong? I tried moving the last line into the loop with in if statement but the same happens.

    $.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>";
});

Thank you for any help.

can't write to the dom as if it is a text editor.

charlietfl
– charlietfl

2015-10-11 15:04:48 +00:00
Commented Oct 11, 2015 at 15:04 — charlietfl
– charlietfl, Commented Oct 11, 2015 at 15:04

Praveen Kumar Purushothaman · Accepted Answer · 2015-10-11 15:04:32Z

2

You cannot add partial <table> and </table> using the innerHTML, as the browser tends to fill it out for you. Best way I would suggest is to build the whole HTML and then append.

So you should have something like:

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.

Also, since you are using jQuery, use the same components. Instead of document.getElementById("aRightContent").innerHTML, use:

$("#aRightContent").html()

answered Oct 11, 2015 at 15:04

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick K. Over a year ago

Works great! Thanks!

lilezek · Accepted Answer · 2015-10-11 15:03:49Z

2

Just write the whole thing in a string:

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>";

etc...

And use then asign to innerHTML = htmlString at the end.

Reason

You shouldn't assign to document.getElementById("aRightContent").innerHTML an incomplete piece of HTML code.

answered Oct 11, 2015 at 15:03

lilezek

7,4552 gold badges30 silver badges47 bronze badges

Collectives™ on Stack Overflow

Bootstrap table with javascript using innerHTML

2 Answers 2

1 Comment

Reason

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Reason

Comments

Your Answer

Sign up or log in

Post as a guest

Related