根据没有表格标签的表格中的文本更改表格单元格文本颜色和行背景答案

【问题标题】：Change table cell text color and background of row based on text in the table without table tag根据没有表格标签的表格中的文本更改表格单元格文本颜色和行背景
【发布时间】：2021-01-07 02:24:48
【问题描述】：

我有一个表，其中包含包含状态的列。两个状态，“打开”和“关闭”在表格的最后一列。

我想将“关闭”的单元格文本颜色更改为红色，将“打开”的行背景颜色更改为绿色。

任何建议都会有所帮助。

编辑：我想了解如何使用 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;
}

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

简单！

<div class="row open">

和

.row.open { background: green; }

为行，而

<div class="cell closed">

和

.dataText.closed { color: red; }

对于单元格

迭代每一行并动态添加类的快速'n'dirty(!) 解决方案：

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

未经测试，但应该可以工作。

【讨论】：

我忘了补充说状态是动态加载的，在加载页面之前不知道单元格中的状态是什么。唯一的状态文本是已知的（打开、关闭）。因此有必要根据最后一列中的文本分配类。这就是我想知道的。
其实这个 JS 代码是行不通的，因为cellContent 也会包含div HTML。
是的，你是对的，这就是为什么我说“quick'n'dirty”和“untested”。实际上运行了这段代码并更新了我的答案。现在它应该可以工作了！
快到了！我想更改行的背景颜色：“Open”和“Closed”的文本颜色，所以应该是：` if (cellContent === "Closed") { cell.classList.add("closed"); } else if (cellContent === "Open") { row.classList.add("open");` 但它只将类应用于表的前两行。最后一行的类没有变化。
啊该死的你是对的，所以我似乎也无法阅读规格；）但我认为你现在掌握了它，应该能够解决你的问题。是的，尽管有一些小缺陷，你仍然可以标记我的答案；）

【解决方案2】：

您可以使用 document.querySelctorAll() 和这个选择器 .cell:last-child .dataText 来获取所有最后一列，检查它们的文本内容，并相应地更改它们的背景颜色。

这应该是你的代码：

Array.from(document.querySelectorAll(".cell:last-child .dataText")).forEach(function(cell) {
  //We select the whole row with cell.parentNode.parentNode
  if (cell.textContent == "Open")
    cell.parentNode.parentNode.style.backgroundColor = "green";
  else if (cell.textContent == "Closed")
    cell.style.color = "red";
});

演示：

这是一个实时工作演示：

Array.from(document.querySelectorAll(".cell:last-child .dataText")).forEach(function(cell) {
  if (cell.textContent == "Open")
    cell.parentNode.parentNode.style.backgroundColor = "green";
  else if (cell.textContent == "Closed")
    cell.style.color = "red";
});

#table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 15px;
}

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

【讨论】：

但请注意，此代码是 ES2015，可能无法在旧版浏览器中运行。
@frontend_dev 是的，你是对的，但总会有一个 ployfill ，反正不会有太大差异，而且逻辑总是一样的。
是的，但是为这么小的 sn-p 使用 polyfill 听起来有点矫枉过正。除此之外，当然每个人都应该至少在做更复杂的事情时切换到 ES6。
我不推荐使用 MDN polyfill，但使用相同的逻辑可以更改代码，使其适用于不支持 ES6 的旧浏览器。
顺便说一句，您的代码似乎不会完全按照 OP 的要求进行

【解决方案3】：

</body>之前的地方：

<script>
  Array.prototype.slice.call(document.querySelectorAll('.cell:last-of-type'))
  .forEach(function (cell) {
    cell.parentElement.className = 'row ' + (cell.innerText === 'Open' ? 'open' : 'closed');
  });
</script>

然后添加到您的 CSS 中：

.row.open {
  background: green;
}
.row.closed {
  color: red;
}

【讨论】：

【解决方案4】：

试试这个：

<span style="color:green">open</span>

【讨论】：