Assign a bootstrap class to a dynamic javascript table

Question

I have a table and forms for CRUD witch i have styled a little with bootstrap. No i also want the table to look good so i tried

tbl.className = 'table table-striped table-bordered table-condensed';

and

tbl.setAttribute("class", "table table-striped table-bordered table-condensed");

The table is getting the class but not the style. I cannot seem to figure out what the problem is.

function skapaTabell(produkter) {
document.getElementById("tabell").innerHTML = "";

var tbl = document.createElement("table");
tbl.className = 'table table-striped table-bordered table-condensed';


//attribut tilldelas
//tbl.setAttribute("border", "1");
tbl.setAttribute("id", "table");
tbl.setAttribute("class", "table table-striped table-bordered table-condensed");



var tblTr = document.createElement("tr");
var tblTh = document.createElement("th");



//skapar rubriker
var thText = document.createTextNode("Id");
tblTh.appendChild(thText);

var tblTh1 = document.createElement("th");

var thText1 = document.createTextNode("Produkt");
tblTh1.appendChild(thText1);

var tblTh2 = document.createElement("th");
var thText2 = document.createTextNode("Kategori");
tblTh2.appendChild(thText2);

var tblTh3 = document.createElement("th");
var thText3 = document.createTextNode("Pris");
tblTh3.appendChild(thText3);

var tblTh4 = document.createElement("th");
var thText4 = document.createTextNode("Beskrivning");
tblTh4.appendChild(thText4);

var tblTh5 = document.createElement("th");
var thText5 = document.createTextNode("Bild");
tblTh5.appendChild(thText5);

tblTr.appendChild(tblTh);
tblTr.appendChild(tblTh1);
tblTr.appendChild(tblTh2);
tblTr.appendChild(tblTh3);
tblTr.appendChild(tblTh4);
tblTr.appendChild(tblTh5);
tbl.appendChild(tblTr);

var i = 0;
do {

    //lÃ¤gger till den nya raden sist i tabellen
    var newRow = tbl.insertRow(-1);

    //varje ny rad behÃ¶ver fyra celler eftersom produkterna har 6 värden
    var newCell = newRow.insertCell(0);
    var newCell2 = newRow.insertCell(1);
    var newCell3 = newRow.insertCell(2);
    var newCell4 = newRow.insertCell(3);
    var newCell5 = newRow.insertCell(4);
    var newCell6 = newRow.insertCell(5);

    newCell.innerHTML = produkter[i].id;
    newCell2.innerHTML = produkter[i].namn;
    newCell3.innerHTML = produkter[i].kategori;
    newCell4.innerHTML = produkter[i].pris;
    newCell5.innerHTML = produkter[i].info;
    newCell6.innerHTML = '<img src="' + produkter[i].url + '" height="100" width="50">';

    i++;
}
while (i < produkter.length);

//tabellen ska visas i element med id tabell.
document.getElementById("tabell").appendChild(tbl);

}

Thanks in advance.

Are you sure that the bootstrap library is being loaded? Assigning the classes means nothing if there are no CSS files to load the classes from — taylorc93
– taylorc93, Commented Mar 16, 2015 at 18:55
Since the forms are styled with bootstrap i guess it should apply to the table aswell. It is linked as usual in my index.html file. "<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">" Not linked in my admin.js file — Erskan
– Erskan, Commented Mar 16, 2015 at 19:33

zss · Accepted Answer · 2020-11-17 16:31:40Z

1

If your table content is correct but the style is wrong, this is the answer：

you must append <tr> in <tbody>，not directly in <table>,like this:

tbodyElement = document.createElement('tbody');

trElement = document.createElement("tr");

tbodyElement.appendChild(trElement);

table.appendChild(tbodyElement);

answered Nov 17, 2020 at 16:31

zss

211 bronze badge

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

Collectives™ on Stack Overflow

Assign a bootstrap class to a dynamic javascript table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related