条件 table 单元格背景颜色取决于值

Question

我有一个 HTML table，我正在尝试根据单元格的值将单元格背景颜色更改为红色。当需要红色时，每个单元格都有不同的阈值（一个单元格可能 > 5，另一个 > 10）。这些细胞在整个table中是零星的，并且none是相互关联的。此外，jquery 用于从存储在 SharePoint 列表中的值中提取值。有什么方法可以检查从列表中拉出的值并在插入 table 之前更改颜色？不确定最好的方法是什么。在此先感谢您提供的任何帮助！

Table行代码：

<tr>
      <td colspan="3" style="width:30%; background-color:#015A78; color:White; text-align:center; 
 font-size:20pt; font-weight:bold; border-width:thick; border-style:inset"><div 
 id="subjectivehoverMouseover" title="">Subjective</div></td>

      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays"></div></td>
      <td></td>

     </tr>

和 jquery 用于提取上面最后一个单元格中 SubjectiveDays 的值：

 if (listItem.Title === "subjectivegrading") {
               $("#SubjectiveDays").text(listItem.c3t9 + " Business Days");
            }

Answer 1

要使用一个单元格，使用我为其他两个单元格复制的示例，更改 ID，可能如下所示：

let listItem = {};
listItem.Title = 'subjectivegrading';
listItem.c3t9 = 5;

if (listItem.Title === "subjectivegrading") {
   $("#SubjectiveDays").text(listItem.c3t9 + " Business Days");
   $("#SubjectiveDays").addClass('red');
}

listItem.c3t9 = 10;
if (listItem.Title === "subjectivegrading") {
   $("#SubjectiveDays2").text(listItem.c3t9 + " Business Days");
   $("#SubjectiveDays2").addClass('yellow');
}

listItem.c3t9 = 15;
if (listItem.Title === "subjectivegrading") {
   $("#SubjectiveDays3").text(listItem.c3t9 + " Business Days");
   $("#SubjectiveDays3").addClass('green');
}

.red {
   color: red;
}

.yellow {
   color: yellow;
}

.green {
   color: green;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays"></div></td>
      <td></td>
      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays2"></div></td>
      <td></td>
      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays3"></div></td>
      <td></td>
 </tr>
 </table>

但是，您可能希望创建一个函数来传递单元格的 ID 引用和 listItem.c3t9 值，以便以更有用的方式应用 CSS，这可能看起来像这样：

let listItem = {};
listItem.Title = 'subjectivegrading';
listItem.c3t9 = 5;

function setElementCSS(elementRef, listItem) {
  if (listItem.Title === "subjectivegrading") {
     $('#' + elementRef).text(listItem.c3t9 + " Business Days");
     
     addCSS = '';
     
     if (listItem.c3t9 > 10) {
         addCSS = 'green';
     } else if (listItem.c3t9 > 5) {
         addCSS = 'yellow';
     } else {
         addCSS = 'red';
     }

     $('#' + elementRef).addClass(addCSS);
  }
}

setElementCSS('SubjectiveDays', listItem);

listItem.c3t9 = 10;
setElementCSS('SubjectiveDays2', listItem);

listItem.c3t9 = 15;
setElementCSS('SubjectiveDays3', listItem);

.red {
   color: red;
}

.yellow {
   color: yellow;
}

.green {
   color: green;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays"></div></td>
      <td></td>
      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays2"></div></td>
      <td></td>
      <td style="background-color:Black; color:White; text-align:center; font-weight:bold; border- 
 style:inset"><div id="SubjectiveDays3"></div></td>
      <td></td>
 </tr>
 </table>

条件 table 单元格背景颜色取决于值

Conditional table cell background color depending on value

html

jquery

conditional-formatting