动态创建 Bootstrap 栅格系统

Question

我正在尝试使用JavaScript函数动态生成Bootstrap列。目标是将它们显示在单行中作为不同的列。

目前它的样子是这样的：

我正在使用div id在window.onload()上调用此函数：

// Update the bootstrap grid once the tasks are added
function updateTaskContainerHead(containerId){
    let containerHead = document.getElementById(containerId);
    // Take the row headings and make an HTML container out of them
    let tblRowHeadings = ['Task Name','Assigned To','Priority','Due Date',''];
    let tblHeadRow = document.createElement("div");
    tblHeadRow.classname="row";
    for (let heading of tblRowHeadings){
        let tblHeadCell = document.createElement("div");
        tblHeadCell.className="col";
        let cellText = document.createTextNode(heading);
        tblHeadCell.appendChild(cellText);
        tblHeadRow.appendChild(tblHeadCell);
    }
    containerHead.appendChild(tblHeadRow);
}

而HTML组件只是：

<lead>Completed Tasks</lead>
<div class="container" id="ongoingTasksContainer">

你认为可能出了什么问题？

- swopnil

---

嗨Swopnil，如果你发现我的回答回答了你的问题，请点赞和/或接受它。如果您仍有未解决的问题，请告诉我，我很乐意在我所能的范围内帮助！ - domdambrogia

Answer 1

只是一个拼写错误.. 一个区分大小写的错误:

最初的回答

tblHeadRow.classname="row";

should be:

tblHeadRow.className="row";

- David Bray

Answer 2

你没有正确设置 tblHeadRow 类。

你需要使用 element.classList.add(className) 方法。(文档) 如果你使用这个方法，你将会有列：

tblHeadRow.classList.add("row");

这里有一个fiddle供参考。

---

然而，在这种情况下，我真的建议使用表格。如果你正在创建一个tbl，head和cell，那么似乎表格是你想要的，bootstrap也有这些帮助类。

- domdambrogia