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

Question

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

表格行代码：

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