基于文本值改变表格单元格的文本和背景颜色 [英] Change Text And Background Color Of Table Cell Based On Text Value

问题描述

我有一张有三列的表格，如下所示：

分类| ITEM | 状态

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

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

这是我的js脚本

 < script> 
函数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 =CellColorstyle =background-color：＃92c38e; text-align：
 center;> 
< span style =color：#ffffff; font-size：medium;> 
<？php print strip_tags（$ category [0] ['status']）; ？>< /跨度>< / TD> 
  

因此，我只得到红色和白色的第一个单元，但这不是偶数显示PRIORITY的值

我已经尝试并重新尝试过，但是我无法理解，任何帮助都将不胜感激。

解决方案

首先让我们解决函数：

 函数c_color（）{
 if（document.getElementById（'CellColor'）。value ==='PRIORITY'）{
 document.getElementById 'CellColor'）。style.color =white; 
 document.getElementById（'CellColor'）。style.background =red; 
 
 
 
 
 $ b 
这会修改你的赋值运算符来比较 === 。在此之前，您已将'PRIORITY'赋予该值并检查它是否正确，这一直是事实。然而，我仍然不喜欢这个函数，让我们稍微重构一下： 
 
 
  function c_color（element）{
 if（element.value ==='PRIORITY'）{
 element.style.color =white; 
 element.style.background =red; 
} 
} 
  
现在它更容易理解，更重要的是，因为它不会假定具有 CellColor   id的标签的颜色如果它具有优先值，则应改变。第三，它会有更好的性能，因为函数先前在DOM中搜索了三次标签，而我已经给出的方法重用了这个元素。现在，要实现以前的行为，你必须调用这样的函数： 
 
 
  c_color（document.getElementById（'CellColor '））
  
请注意，它必须找到一次，然后重用。  
 
 
 以下部分假定您有 id  <$ c $的多个标签实例c> CellColor 。 
 
 
 
现在，我们仍然有问题。你有一个 CellColor   id ，如果重复，那么只有第一个对应的项目会被找到使用 document.getElementById ，并且您的HTML无效，因为 id 在文档中应该是唯一的。你可以用黑客的方式克服你的问题，但我不推荐他们。 hacky的方法是使用 document.querySelectorAll（'＃CellColor'），它将向您返回一个类似数组的对象，或者将您的 tr 使用 document.querySelectorAll 的项目，当您迭代它们时，使用的getElementById 。然而，正如我所说，我不推荐他们，因为他们过度复杂你的生活，更重要的是，你的HTML仍然是无效的。相反，解决方案应该是将 CellColor 修改为类而不是 id 。然后，您可以使用 document.getElementsByClassName（'CellColor'）或 document.querySelectorAll（'.CellColor'），或者，如果这很慢，请在祖先表而不是文档的上下文中进行搜索，如 document.getElementById（＃yourtableid）。getElementsByClassName（'CellColor'）。
 
I have a table with three columns as follows:

CATEGORY | ITEM | STATUS

The table is populated with data from a php script

I need to make sure that the cells under the header "STATUS" will change to be of red background and white text color if a value of "PRIORITY" is the result of the php data import.

Here is my js script
<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>
And this is the HTML/PHP that calls the function
<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>
As a result I get only the first cell with the red and white colors but this isn't even showing a value of "PRIORITY"

I have tried and re-tried but I can't get it right, any help will be greatly appreciated.
解决方案
First let's fix the function:
function c_color(){
    if (document.getElementById('CellColor').value === 'PRIORITY') {
        document.getElementById('CellColor').style.color = "white";
        document.getElementById('CellColor').style.background="red";
    }
}
This modifies your assignment operator to comparison of ===. Previously, you have given 'PRIORITY' to the value and checked whether it is truey, which was always the case. However, I still do not like this function, let's refactor it a little bit:
function c_color(element){
    if (element.value === 'PRIORITY') {
        element.style.color = "white";
        element.style.background="red";
    }
}
and now it is much more understandable, and more importantly, reusable, since it does not assume that the color of a tag having a CellColor id should be changed if it has a priority value. Thirdly, it will have a better performance, since the function was searching for a tag three times in the DOM previously, while the approach I have given reuses the element. Now, to achieve the previous behavior, you will have to call the function like this:
c_color(document.getElementById('CellColor'))
Note that it has to be found once and then it is reused. 

The section below assumes that you have multiple instances of tags having the id of CellColor.

Now, we still have a problem. You have a CellColor id which, if duplicate, then only the first corresponding item will be found using document.getElementById and your HTML is invalid, since id should be unique in the document. You can overcome your problem in hacky ways, but I do not recommend them. The hacky ways are to either use document.querySelectorAll('#CellColor'), which will return an array-like object to you with all the corresponding cells or to gather your tr items using document.querySelectorAll and while you iterate them, search for your item in their context using getElementById. However, as I said, I do not recommend them, since they overcomplicate your life and, more importantly, your HTML will still be invalid. Instead, the solution should be to modify CellColor to be a class instead of an id. Then, you could use document.getElementsByClassName('CellColor') or document.querySelectorAll('.CellColor'), or, if this is slow, search in the context of the ancestor table instead of document, like document.getElementById("#yourtableid").getElementsByClassName('CellColor').

                        
这篇关于基于文本值改变表格单元格的文本和背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！