将引导类分配给动态 javascript 表答案

【问题标题】：Assign a bootstrap class to a dynamic javascript table将引导类分配给动态 javascript 表
【发布时间】：2020-11-18 00:31:40
【问题描述】：

我有一个 CRUD 女巫的表格和表格，我用引导程序设计了一些样式。不，我也希望桌子看起来不错，所以我尝试了

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

和

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

表格正在获取类而不是样式。我似乎无法弄清楚问题所在。

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

}

提前致谢。

【问题讨论】：

您确定正在加载引导库吗？如果没有 CSS 文件可以从中加载类，那么分配类就没有任何意义
由于表单是用引导程序设计的，我想它也应该适用于表格。它像往常一样在我的 index.html 文件中链接。 "maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">" 在我的 admin.js 文件中没有链接

标签： javascript html mysql css twitter-bootstrap

【解决方案1】：

如果你的表格内容正确但样式错误，这就是答案：

你必须在<tbody>中附加<tr>，而不是直接在<table>中，像这样：

tbodyElement = document.createElement('tbody');

trElement = document.createElement("tr");

tbodyElement.appendChild(trElement);

table.appendChild(tbodyElement);

【讨论】：