CODEWITHSUNDEEP
javascripthtmlmysqlcsstwitter-bootstrap
Erskan
Erskan

Reputation: 118

Assign a bootstrap class to a dynamic javascript table

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.

Upvotes: 1

Views: 733

Answers (1)

zss
zss

Reputation: 21

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

Upvotes: 1

Related Questions