我正在构建一个HTML表，其中一列动态创建了带有背景 colored颜色 和文本内容的div.我已经能够创建div并添加样式...但是我不能让文本内容显示在div中.以下是我试图实现的目标(见下图):
...and here's where I am at so far:
我认为具有背景 colored颜色 的div是"父div"，而具有文本内容的div是"Child div".我try 将文本div附加到父div，将文本的z索引设置得更高，但不起作用.我还try 了只设置父div本身的innerText个内容，但也不起作用.有人能告诉我如何才能根据示例屏幕截图让文本显示在div中吗？
先谢谢你.以下是演示该问题的一些工作代码:
const populateProjectsTable = (data) => {
// Store table id in variable
let tableRef = document.getElementById("recent-projectlayui-table-body");
// Clear out table data before loading new results
$(tableRef).empty();
$(tableRef).show();
sampleData.forEach((item) => {
// Insert a row at the end of the table
let newRow = tableRef.insertRow(-1);
// Name Cell
let nameCell = newRow.insertCell(0);
nameCell.className = "left-align";
// Name text and container
let nameText = document.createTextNode("name");
nameCell.appendChild(nameText);
// Assessments Cell
let assessmentsCell = newRow.insertCell(1);
let assessmentsText = document.createTextNode("assessment count");
assessmentsCell.className = "right-align";
assessmentsCell.appendChild(assessmentsText);
// Count Cell
let countCell = newRow.insertCell(2);
countCell.className = "center-align"
// Div to hold circles
let countsDiv = document.createElement('div');
// Create individual circles
// green
let greenCount = document.createElement("div");
greenCount.className = "circle green"
let greenText = utils.createElements("div", "circle-text");
$(greenText).text("1")
greenCount.append(greenText);
// yellow
let yellowCount = document.createElement('div');
yellowCount.className = "circle yellow";
let yellowText = utils.createElements("div", "circle-text");
$(yellowText).text("1")
yellowCount.append(yellowText);
// red
let redCount = document.createElement("div");
redCount.className = "circle red";
let redText = utils.createElements("div", "circle-text");
$(redText).text("1")
redCount.append(redText);
// Append to div
countsDiv.append(greenCount, yellowCount, redCount);
// Append div to cell
countCell.appendChild(countsDiv);
});
};/* ==================================================
Table styling
================================================== */
.table {
margin-top: 1rem;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #ddd;
position: relative;
border-radius: 0.8rem;
overflow: clip;
}
th {
font-weight: 500;
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: -1px;
}
.table-th,
.table td {
padding: 8px;
height: 40px;
}
.table>thead>tr {
background-color: orange;
}
tbody tr:nth-child(even) {
background-color: #fce8c3;
}
tbody tr:nth-child(odd) {
background-color: white !important;
}
.table__small {
width: fit-content;
}
.table__wide {
width: 100%;
}
.right-align {
text-align: right;
}
.center-align {
text-align: center;
}
.left-align {
text-align: left;
}
/* ==================================================
Circle styling
================================================== */
.circle {
width: 20px;
height: 20px;
border-radius: 250px;
line-height: 500px;
text-align: center;
margin: 4px;
}
.circle-text {
font-size: 14px;
color: #000;
z-index: 100;
}
.counts-div {
display: flex;
justify-content: center;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.red {
background: red;
}<table id="recent-projectlayui-table" class="table" style="display: table;">
<thead class="sticky">
<tr id="projects-config-tr">
<!-- Project Name -->
<th class="sticky left-align table-th table-column__name">
Recent Projects
</th>
<!-- Assessments -->
<th class="sticky right-align table-th">Assessments</th>
<!-- Counts -->
<th class="sticky center-align table-th">Counts</th>
</tr>
</thead>
<tbody id="recent-projectlayui-table-body">
<tr>
<td class="left-align">Buddy Games</td>
<td class="right-align">3</td>
<td>
<div class="counts-div">
<div class="circle green" style="
z-index: 2;
">
<div class="circle-text" style="
position: absolute;
">1</div>
</div>
<div class="circle yellow">1</div>
<div class="circle red">1</div>
</div>
</td>
</tr>
<tr>
<td class="left-align">Richie Rich, The Poor House</td>
<td class="right-align">0</td>
<td>
<div class="counts-div">
<div class="circle green">
<div class="circle-text">1</div>
</div>
<div class="circle yellow">1</div>
<div class="circle red">1</div>
</div>
</td>
</tr>
<tr>
<td class="left-align">NewProject1</td>
<td class="right-align">0</td>
<td>
<div class="counts-div">
<div class="circle green">
<div class="circle-text">1</div>
</div>
<div class="circle yellow">1</div>
<div class="circle red">1</div>
</div>
</td>
</tr>
<tr>
<td class="left-align">TestProject</td>
<td class="right-align">0</td>
<td>
<div class="counts-div">
<div class="circle green">
<div class="circle-text">1</div>
</div>
<div class="circle yellow">1</div>
<div class="circle red">1</div>
</div>
</td>
</tr>
</tbody>
</table>