根据文本值更改表格单元格的文本和背景颜色答案

【问题标题】：Change Text And Background Color Of Table Cell Based On Text Value根据文本值更改表格单元格的文本和背景颜色
【发布时间】：2017-12-27 18:48:00
【问题描述】：

我有一个包含三列的表格，如下所示：

类别 |项目 | 状态

表格中填充了来自 php 脚本的数据

如果“PRIORITY”的值是 php 数据导入的结果，我需要确保标题“STATUS”下的单元格将变为红色背景和白色文本颜色。

这是我的 js 脚本

<script>
function c_color(){
if (document.getElementById('CellColor').value = 'PRIORITY') {
document.getElementById('CellColor').style.color = "white";
document.getElementById('CellColor').style.background="red";
}
}
c_color();
</script>

这是调用函数的 HTML/PHP

<td id="CellColor" style="background-color: #92c38e; text-align: 
center;">
<span style="color: #ffffff; font-size: medium;">
<?php print strip_tags($category[0]['status']); ?></span></td>

结果我只得到了第一个带有红色和白色的单元格，但这甚至没有显示“优先级”的值

我已经尝试了又重新尝试，但我无法做到正确，任何帮助将不胜感激。

【问题讨论】：

第一个单元格是什么意思，你有更多相同ID的单元格吗？
此表是否通过 ajax 调用加载？向单元格添加一个“优先级”类怎么样？
@adeneo 我的意思是标题“状态”下方的第一个单元格
@vector 表格单元格的值由 PHP 脚本填充，该脚本通过 XML API 调用从远程服务器获取数据
@Diego，您是否有理由不在 php 中根据 status 的值在渲染时添加适当的类？我在这里假设行和单元格在某种循环中呈现，不是吗？

标签： javascript html css

【解决方案1】：

将== 或=== 用于comparison in JavaScript。

您的代码：

if (document.getElementById('CellColor').value = 'PRIORITY')

分配一个值，因为它使用单个等号（这将始终导致if 进入true 分支）。

此外，HTML td 元素不会有 value 属性（只有表单元素有）。使用 textContent 属性访问非表单元素的文本内容。

此外，请确保您的 JavaScript 代码放置在 <body> 元素关闭之前，或者将其放在 window 的 DOMContentLoaded 事件的回调中，以确保它不会在它需要使用甚至被解析的 HTML 元素之前运行。

现在，除了这些要点之外，这里只是一个友好的“最佳实践”建议。尝试摆脱对 HTML 元素的硬编码或动态创建“内联样式”。这种技术很快就会变得混乱，并且会产生可伸缩性问题，因为内联样式在需要时很难覆盖。相反，请提前编写 CSS 类，然后根据需要简单地添加或删除这些类。

这是一个例子：

// The following code won't run until all the HTML has been parsed into memory
window.addEventListener("DOMContentLoaded", function(){
  // Just scan the DOM for the element one time
  var theCell = document.getElementById('CellColor');
  
  // Here, we're just testing to see if the cell "contains" the text "PRIORITY",
  // not that it exactly equals it.
  if (theCell.textContent.indexOf('PRIORITY') > -1) {
    // Just add the pre-made class and you're done
    theCell.classList.add("special");
  }
});

td {
  background-color: #92c38e;
  text-align: center;
}

.span {
  color: #ffffff; 
  font-size: medium;
}

.special {
  color:white;
  background-color:red;
}

<table>
  <tr>
    <td id="CellColor">PRIORITY
      <span class="span">span sample</span>
    </td>
  </tr>
</table>

【讨论】：

我已经尝试过使用内联样式和对外部 css 的引用，但恐怕没有结果。现在我完全没有颜色。 PS：当我从这个页面上的“运行代码 sn-p”功能运行你的代码时，它会产生一个错误。
@Diego 你使用什么浏览器，因为我认为你有问题？这是标准代码，可以在这里正常运行。您确实启用了 JavaScript，对吗？您遇到错误并且无法让 CSS 正常工作这一事实表明存在更大的问题。
不幸的是，此编辑也没有产生预期的结果。也许如果我给你看完整的剧本会更好？我正在使用 Chrome 并且 JavaScript 已启用
@Diego 同样，此 sn-p 中的代码正在按照您的要求和预期运行。如果您无法运行此代码，则说明您在其他地方遇到了问题。
正确，它现在正在运行，但您的第一版出现错误。无论如何，不幸的是它没有在我的网页上运行。

【解决方案2】：

首先让我们修复function：

function c_color(){
    if (document.getElementById('CellColor').value === 'PRIORITY') {
        document.getElementById('CellColor').style.color = "white";
        document.getElementById('CellColor').style.background="red";
    }
}

这会将您的赋值运算符修改为与=== 进行比较。以前，您已将'PRIORITY' 赋予该值并检查它是否为true，情况总是如此。不过我还是不喜欢这个function，我们稍微重构一下吧：

function c_color(element){
    if (element.value === 'PRIORITY') {
        element.style.color = "white";
        element.style.background="red";
    }
}

现在它更容易理解，更重要的是，可重用，因为它不假定如果标签具有 CellColor id 具有优先级值，则应该更改它的 color。第三，它会有更好的性能，因为该函数之前在 DOM 中搜索了 3 次标签，而我给出的方法重用了元素。现在，要实现之前的行为，您必须像这样调用函数：

c_color(document.getElementById('CellColor'))

请注意，它必须找到一次，然后才能重复使用。

以下部分假设您有多个标签实例，其中包含 id 或 CellColor。

现在，我们还有一个问题。你有一个CellColorid，如果重复，那么使用document.getElementById只会找到第一个对应的项目，并且你的HTML无效，因为id在文档中应该是唯一的。你可以用 hacky 的方式解决你的问题，但我不推荐它们。骇人听闻的方法是使用document.querySelectorAll('#CellColor')，它将向您返回一个带有所有相应单元格的类似数组的对象，或者使用document.querySelectorAll 收集您的tr 项目，当您迭代它们时，在它们的项目中搜索您的项目使用getElementById 的上下文。但是，正如我所说，我不推荐它们，因为它们会使您的生活过于复杂，更重要的是，您的 HTML 仍然无效。相反，解决方案应该是将CellColor 修改为一个类而不是id。然后，您可以使用document.getElementsByClassName('CellColor') 或document.querySelectorAll('.CellColor')，或者，如果这很慢，请在祖先table 的上下文中搜索而不是document，例如document.getElementById("#yourtableid").getElementsByClassName('CellColor')。

【讨论】：

@Lajos Arpad 这工作很好，所以我们还有另一个 10/10 出色的工作，非常感谢您所有宝贵的时间和精力。

【解决方案3】：

如果您要为多个元素使用相同的 id，则不能使用 getElementById（参见此处 https://jsfiddle.net/n7evzzer/）。 getElementById 只适用于第一个结果，因为它只返回它在 DOM 中找到的第一个元素。这也是无效的语法，如果你通过 HTML 验证器运行它，它会抛出一个错误。文档中应该只有唯一的 id。

我建议你改用一个类，比如priority，然后根据这个类给它上色。

在这里，您可以 100% 做到这一点，无需 JavaScript，如下所示：

td {
  text-align: center;
}

.priority {
  color: white;
  background: red;
}

td:not(.priority){
  color: white;
  background: #92c38e;
}

<table>
    <tr>
      <td class="priority">
        <span>PRIORITY</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>NOT A PRIORITY</span>
      </td>
    </tr>
    <tr>
      <td class="priority">
        <span>PRIORITY</span>
      </td>
    </tr>
    <tr>
      <td class="priority">
        <span>PRIORITY</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>NOT A PRIORITY</span>
      </td>
    </tr>
</table>

【讨论】：

感谢您的建议，但在我的情况下，这不起作用，因为单元格内的文本是由 PHP 代码动态填充的，所以我无法控制文本值为“PRIORITY”的单元格将在哪里结束。通过使用类的显示方式，您必须提前知道“优先级”数据的位置。

【解决方案4】：

...这样的事情呢。添加一个类属性，然后添加一些 css 来为它着色：

.priority{
color:#fff;
background-color:red;
}

<td><span 
style="color: #ffffff; font-size: medium;" 
class="<?=strtolower($category[0]['status'])?>">

<?php print strip_tags($category[0]['status']); ?></span></td>

【讨论】：