我有一个相关的/初步的问题here。
我认为以下改编自here的CSS和HTML是一个良好的开端，或者至少是有趣的：
.container {
display: table;
}
.row {
display: table-row;
}
.column {
display: table-cell;
}
注意：我已添加了ID
<div class="container">
<div class="row" id="row1">
<div class="column" id="row1Col1">Column 1</div>
<div class="column" id="row1Col2">Column 2</div>
<div class="column" id="row1Col3">Column 3</div>
</div>
<div class="row" id="row2">
<div class="column" id="row2Col1">Date goes here</div>
<div class="column" id="row2Col2">Shift1</div>
<div class="column" id="row2Col3">Blank to begin with</div>
</div>
</div>
但我需要动态添加到此，以便每个Column1始终保持为“高”作为相应的Column2，因为行被添加到Column2，并且当行添加到Column3时，Column2的第一行（Shift） ，例如“Shift 1”）与它保持垂直的速度。所以你会有这样的事情：
Column1 Column2 Column3
====== ====== ======
Mon Aug 24 Shift 1 Something about Shift1
More about Shift1
Yet more about Shift1
Shift 2 Something about Shift2
More about Shift2
Shift 3 Something about Shift3
Tues Aug 25 Shift1
为了尽可能清楚，我将在任何程序化添加之前展示出来的内容：
Column1 Column2 Column3
====== ====== ======
Mon Aug 24 Shift 1
...然后在Column2中再添加两行（“Shift1”和“Shift2”），并在Column3中添加相关的词汇：
Column1 Column2 Column3
====== ====== ======
Mon Aug 24 Shift 1 Something about Shift1
Shift 2 Something about Shift2
Shift 3 Something about Shift3
...然后在Column3中添加有关Shift1的更多信息：
Column1 Column2 Column3
====== ====== ======
Mon Aug 24 Shift 1 Something about Shift1
More about Shift1
Yet more about Shift1
Shift 2 Something about Shift2
Shift 3 Something about Shift3
...我认为你得到了图片（Column1和Column2都垂直增长，以跟上Column3中Column2的Shift1的含义）。然后，如果在与Shift2相关的Column3中添加了verbiage，则会发生同样的情况：
Column1 Column2 Column3
====== ====== ======
Mon Aug 24 Shift 1 Something about Shift1
More about Shift1
Yet more about Shift1
Shift 2 Something about Shift2
More about Shift2
Shift 3 Something about Shift3
所以，我认为我可以这样做：当在Column2中以编程方式添加Row（例如“Shift2”或“Shift3”直到“ShiftN”）时，也向Column1添加一行（在我的场景中，向Column2添加一行（另一个Shift）时，向Column1添加一个“空白”行以保持它们的高度相同。）
但后来变得更复杂：向Column3 添加一行关于Shift1 时，也在“Shift2”行之前向Column1和Column2添加行，或者如果“Shift1”追加到末尾“是唯一一个。
所以我的问题是：我如何以编程方式（在JavaScript中）向div添加“sub-divs”（伪/ CSS列中的伪/ CSS行）？
答案 0 :(得分：2)
只需确保将新div.row追加到div.container时，div.row有三个div.column子项，即使某些div.column个元素也是如此是空的：
//Our container:
var container = document.querySelector("div.container");
function insertRow(index, columns) {
/**
* This is a function that inserts a div.row before the (index)th child of div.container. Note that the (index)th child is counted using zero-based indexing.
* If index is null, we simply append the row to the end.
* Note that the div.row has three div.column children, each with textContent of columns[0], columns[1], and columns[2] (which may be blank if necessary).
*/
//Create the div.row:
var row = document.createElement("div");
row.classList.add("row");
//Append the three div.column children:
for (var i = 0; i < 3; i++) {
var column = document.createElement("div");
column.classList.add("column");
column.textContent = columns[i];
//Append the column into row:
row.appendChild(column);
}
//If index is null, append row into container:
if (index === null) {
container.appendChild(row);
}
//Otherwise, insert row before container's (index)th child:
else {
//container's children:
var children = document.querySelectorAll("div.container div.row");
container.insertBefore(row, children[index]);
}
}
//Insert a new row to the end:
insertRow(null, ["", "Hi!", "I'm friendly!"]);
//We can also insert something in the middle:
insertRow(2, ["", "", "I'm a cool person!"]);/* Give each cell some space and a border so this is more readable: */
.container {
display: table;
border-spacing: 10px;
}
.row {
display: table-row;
}
.column {
display: table-cell;
padding: 5px;
border: 1px solid black;
}<div class="container">
<div class="row" id="row1">
<div class="column" id="row1Col1">Column 1</div>
<div class="column" id="row1Col2">Column 2</div>
<div class="column" id="row1Col3">Column 3</div>
</div>
<div class="row" id="row2">
<div class="column" id="row2Col1">Date goes here</div>
<div class="column" id="row2Col2">Shift1</div>
<div class="column" id="row2Col3"></div>
</div>
</div>