我有一个表,其中包含包含状态的列。表的最后一列有“Open”和“Closed”两种状态。
我想将“已关闭”的单元格文本颜色更改为红色,并将“打开”的行背景颜色更改为绿色。
任何建议都会有帮助。
编辑:我想了解如何使用 javascript 根据表格最后一列中的文本上下文(打开、关闭)分配上述颜色。
HTML:
<div id="table">
<div class="row">
<div class="cell">
<div class="dataText">a</div>
</div>
<div class="cell">
<div class="dataText">b</div>
</div>
<div class="cell">
<div class="dataText">c</div>
</div>
<div class="cell">
<div class="dataText">Open</div>
</div>
</div>
<div class="row">
<div class="cell">
<div class="dataText">1</div>
</div>
<div class="cell">
<div class="dataText">2</div>
</div>
<div class="cell">
<div class="dataText">3</div>
</div>
<div class="cell">
<div class="dataText">Closed</div>
</div>
</div>
<div class="row">
<div class="cell">
<div class="dataText">c</div>
</div>
<div class="cell">
<div class="dataText">d</div>
</div>
<div class="cell">
<div class="dataText">e</div>
</div>
<div class="cell">
<div class="dataText">Closed</div>
</div>
</div>
<div class="row">
<div class="cell">
<div class="dataText">a</div>
</div>
<div class="cell">
<div class="dataText">b</div>
</div>
<div class="cell">
<div class="dataText">c</div>
</div>
<div class="cell">
<div class="dataText">Open</div>
</div>
</div>
</div>
CSS:
#table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 15px;
}
最佳答案
简单!
<div class="row open">
和
.row.open { background: green; }
对于行,并且
<div class="cell closed">
和
.dataText.closed { color: red; }
对于单元格
一个快速且肮脏(!)的解决方案,用于迭代每一行并动态添加类:
var rows = document.querySelectorAll("div#table .row"); // get all rows
[].forEach.call(rows, function(row) { // iterate over each row
var cell = row.querySelector(".cell:last-child .dataText"); // get the dataText Element in the last cell in each row
var cellContent = cell.innerHTML; // read out cell content
if (cellContent === "Open") { // it says "Open"
row.classList.add("open"); // add "open" class to row
cell.classList.add("open"); // add "open" class to status cell
} else if (cellContent === "Closed") { // it says "Closed"
row.classList.add("closed"); // add "closed" class to row
cell.classList.add("closed");// add "closed" class to status cell
}
});
未经测试,但应该可以工作。
关于javascript - 根据不带表格标签的表格中的文本更改表格单元格文本颜色和行背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47243284/