Question

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

CATEGORY | ITEM |的状态

该表填充了来自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>

因此，我只获得了第一个带有红色和白色的单元格，但这甚至没有显示“PRIORITY”的值

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

Answer 1

使用==或=== comparison in JavaScript 。

您的代码：

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

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

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

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

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

以下是一个例子：

DOMContentLoaded

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

Answer 2

首先让我们修复function：

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

这会修改您的赋值运算符以比较===。以前，您已将'PRIORITY'赋予该值并检查它是否为真，这始终是这种情况。但是，我仍然不喜欢这个function，让我们稍微重构一下：

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

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

c_color(document.getElementById('CellColor'))

请注意，必须先找到它，然后重复使用。

以下部分假设您有多个id CellColor的代码实例。

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

Answer 3

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

我建议您使用类，例如priority，然后根据类对其进行着色。

如果没有JavaScript，您可以100％完成此操作：

＆＃13;

td {
  text-align: center;
}

.priority {
  color: white;
  background: red;
}

td:not(.priority){
  color: white;
  background: #92c38e;
}

＆＃13;

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

＆＃13;

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

基于文本值改变表格单元格的文本和背景颜色

4 个答案: