根据值更改表格单元格的背景颜色（由 XML 导入）

【问题标题】：Change background color of a table cell based on its value(Imported by XML)根据值更改表格单元格的背景颜色（由 XML 导入）
【发布时间】：2023-03-18 05:53:01
【问题描述】：

我有一个 html 文件，其中包含一个表格，XML 数据被导入并处理到 tbody。第 7 列和第 8 列应根据第 7 列的值获得背景颜色。我有 5 个不同的类（5 种不同的颜色），它们位于我的 css

的顶部

我尝试了一些 JQuery：（在 html 中的 /div 下方）

$("td:nth-child(7):contains('Windows Service Check')").addClass('disaster');

但它不适用于 xml 导入（尝试将代码从浏览器中复制出来，它成功了，复制了 tbody 下的所有内容并将其粘贴到 html 文件中的 tbody 上。）

我希望有人可以帮助我:)

这是我的代码：

HTML：

<html>
<head>
<meta charset="utf-8" name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
 <title>Monitoring</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="main">
    <table id="Table">
        <thead>
            <tr class="NoHover">
                <th class="col1" scope='col' >Time&#9660;</th>
                <th class="col2" scope='col' ></th>
                <th class="col3" scope='col' >Client</th>
                <th class="col4" scope='col' >Status</th>
                <th class="col5" scope='col' >Site</th>
                <th class="col6" scope='col' >Host</th>
                <th class="col7" scope='col' >Problem &bull; Cause</th>
                <th class="col8" scope='col' ></th>
                <th class="col9" scope='col' >Frequency</th>
            </tr>
        </thead>
    <tbody id="TableData"> 
    </tbody>
    </table>
</div>

JavaScript：（xml 的导入）

//Javascript code here
//XML Import & TBody Generation
window.addEventListener("load", function() {
getRows();
});
function getRows() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("get", "data.xml", true);
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        showResult(this);
    }
};
xmlhttp.send(null);
}
function showResult(xmlhttp) {
var xmlDoc = xmlhttp.responseXML.documentElement;
removeWhitespace(xmlDoc);
var outputResult = document.getElementById("TableData");
    var rowData = xmlDoc.getElementsByTagName("tt-outageRow");

addTableRowsFromXmlDoc(rowData,outputResult);
}
function addTableRowsFromXmlDoc(xmlNodes,tableNode) {
var theTable = tableNode.parentNode;
var outage_start, check_status, client_name;
for (i=0; i<xmlNodes.length; i++) {
newRow = tableNode.insertRow(i);
    outage_start = newRow.insertCell(newRow.cells.length);
    outage_start.innerHTML = xmlNodes[i].childNodes[4].firstChild.nodeValue;
    check_status = newRow.insertCell(newRow.cells.length);
    check_status.innerHTML = xmlNodes[i].childNodes[0].firstChild.nodeValue;
    check_status = newRow.insertCell(newRow.cells.length);
    check_status.innerHTML = xmlNodes[i].childNodes[1].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[7].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[2].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[3].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[5].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[6].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[8].firstChild.nodeValue;
}
theTable.appendChild(tableNode);
}
function removeWhitespace(xml) {
var loopIndex;
for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++)
{
    var currentNode = xml.childNodes[loopIndex];
    if (currentNode.nodeType == 1)
    {
        removeWhitespace(currentNode);
    }
    if (!(/\S/.test(currentNode.nodeValue)) && (currentNode.nodeType == 3))
    {
        xml.removeChild(xml.childNodes[loopIndex--]);
    }
  }
}

CSS：

/*CSS for color classes*/
td.disaster {   background-color: #E45858
}
td.high     {   background-color: #E87658
}
td.average  {   background-color: #FEA058
}
td.warning  {   background-color: #FEC858
}
td.information  {   background-color: #7498FE
}
/*CSS for main elements*/
div {   max-width: 2600px;
        display: block;
}
body {  font-family: Arial, Tahoma, Verdana, sans-serif;
        background-color: #FFFFFF;
}
table {     text-align: left;
            border-collapse: collapse;
}
th  {   font-size: 75%; 
        font-weight: normal;
        color:  #768C98;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 2px solid #DCE2E4;
}
td  {   font-size: 75%; 
        color: #1F2C33;
        height: 25px;
        padding-top: 1px;
        padding-bottom: 1px;
        border-bottom: 1px solid #EAEEF0;
}   
/*CSS for Hover*/
td:nth-child(1):hover   {   text-decoration: underline;
}
td:nth-child(1) {   background-color: #FFFFFF;
}
td:nth-child(2) {   background-color: #FFFFFF;
}
tr.NoHover:hover{   background-color: #FFFFFF;
}
tr:hover {      background-color: #E8F5FF;
}
/*Column specific CSS*/
th.col1 {   text-align: right;
            width: 240px;
            padding-right: 18px
}
th.col2 {   width: 11px;
            padding: none;  
}
th.col3 {   text-align: left;
            width: 188px;
            padding-left: 10px;
}
th.col4 {   text-align: left;
            width: 70px;
}
th.col5 {   text-align: left;
            width: 77px;
            padding-left: 82px;
}
th.col6 {   text-align: left;
            width: 430px;
}
th.col7 {   text-align: left;
        padding-left: 10px;
        width: 497px;
}
th.col8 {   text-align: left;
        width: 498px;
}
th.col9 {   text-align: left;
        padding-left: 10px;
        width: 75px;
}
td:nth-child(1) {   text-align: right;
                color: #0274B8;
                padding-right: 18px;
                border-right: 2px solid #AAD6F0;
                border-bottom: none;
}
td:nth-child(2) {   color: white;
                border-bottom: none;
                width: 11px;
                padding: none;
}
td:nth-child(3) {   text-align: left;
                text-decoration: underline dotted; 
                padding-left: 10px;
                border-bottom: 1px solid #EAEEF0;
}
td:nth-child(4) {   text-align: left;
                color: #DC0000;
                border-bottom: 1px solid #EAEEF0;
}
td:nth-child(5) {   text-align: right;
                text-decoration: underline dotted;
                padding-right: 15px;
                border-bottom: 1px solid #EAEEF0;
}
td:nth-child(6) {   text-align: left;
                text-decoration: underline dotted;  
                border-bottom: 1px solid #EAEEF0;                       
}
td:nth-child(7) {   text-align: left;
                text-decoration: underline dotted ;
                padding-left: 10px;
                border-bottom: 1px solid #EAEEF0;
}
td:nth-child(8) {   text-align: left;
                text-decoration: underline dotted;
                border-bottom: 1px solid #EAEEF0;
}
td:nth-child(9) {   text-align: left;
                padding-left: 10px; 
                border-bottom: 1px solid #EAEEF0;
}

XML：

<?xml version="1.0"?>
<tt-outage xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <tt-outageRow>
    <outage_type>1</outage_type>
    <client_name>Client 1</client_name>
    <site_name>Site 1</site_name>
    <device_description>PC1</device_description>
    <outage_start>2017-11-22</outage_start>
    <check_description>Windows Service Check</check_description>
    <check_cause>Unable to open service</check_cause>
    <check_status>FAILING</check_status>
    <check_frequency>24x7</check_frequency>
    <outage_color>#E45858</outage_color>
  </tt-outageRow>
  <tt-outageRow>
    <outage_type>1</outage_type>
    <client_name>Client 2</client_name>
    <site_name>Site 2</site_name>
    <device_description>PC2</device_description>
    <outage_start>2017-11-22</outage_start>
    <check_description>Windows Service Check</check_description>
    <check_cause>Unable to open service</check_cause>
    <check_status>FAILING</check_status>
    <check_frequency>24x7</check_frequency>
    <outage_color>#E87658</outage_color>
  </tt-outageRow>
  <tt-outageRow>
    <outage_type>1</outage_type>
    <client_name>Client 3</client_name>
    <site_name>Site 3</site_name>
    <device_description>PC3</device_description>
    <outage_start>2017-11-22</outage_start>
    <check_description>Windows Service Check</check_description>
    <check_cause>Unable to open service</check_cause>
    <check_status>FAILING</check_status>
    <check_frequency>24x7</check_frequency>
    <outage_color>#EAEEFO</outage_color>
  </tt-outageRow>
  <tt-outageRow>
    <outage_type>1</outage_type>
    <client_name>Client 4</client_name>
    <site_name>Site 4</site_name>
    <device_description>PC4</device_description>
    <outage_start>2017-11-22</outage_start>
    <check_description>Windows Service Check</check_description>
    <check_cause>Unable to open service</check_cause>
    <check_status>FAILING</check_status>
    <check_frequency>24x7</check_frequency>
    <outage_color>#FEC858</outage_color>
  </tt-outageRow>
  <tt-outageRow>
    <outage_type>1</outage_type>
    <client_name>Client 5</client_name>
    <site_name>Site 5</site_name>
    <device_description>PC5</device_description>
    <outage_start>2017-11-22</outage_start>
    <check_description>Windows Service Check</check_description>
    <check_cause>Unable to open service</check_cause>
    <check_status>FAILING</check_status>
    <check_frequency>24x7</check_frequency>
    <outage_color>#7498FE</outage_color>
  </tt-outageRow>
</tt-outage>

【问题讨论】：

  • 什么时候调用jQuery代码？我没有看到其中的 addClass 行。
  • 你能用你的代码制作codepen，jsbin，这样我们就可以看到它的实际效果吗？
  • 如何在这些程序中导入 xml？ @Zvezdas1989
  • 我在 /div 下的 html 文件中使用了 jQuery 代码。 @epascarello 但我删除了，因为它不起作用
  • 好吧，它会在添加之前尝试选择行。添加行后，您需要运行它....

标签： javascript html css xml


【解决方案1】：

我猜你在建表之后调用你的 jQuery 构造。我会在生成一行时这样做。我不会使用复杂的 jQuery 遍历所有 DOM 元素来满足您的选择器，这总是很昂贵，我会根据您的“灾难”值测试您从 XML 获得的值（您可能希望将其移动到变量或集合变量，但这是另一回事）。

做这样的事情：

//in the beginning
var disasterStr = 'Windows Service Check',
    disasterClass = 'disaster';

//...inside of your table building loop...
if (xmlNodes[i].childNodes[6].firstChild.nodeValue === disasterStr) {
    $(client_name).addClass(disasterClass);
    //or, using Vanilla
    //client_name.className = client_name.className + ' ' + disasterClass;
}
//...

除此之外，您不需要在循环中重新声明变量，因此您的循环看起来会更好：

var outage_start, check_status, client_name;
for (i=0; i<xmlNodes.length; i++) {
    newRow = tableNode.insertRow(i);
    outage_start = newRow.insertCell(newRow.cells.length);
    outage_start.innerHTML = xmlNodes[i].childNodes[4].firstChild.nodeValue;
    check_status = newRow.insertCell(newRow.cells.length);
    check_status.innerHTML = xmlNodes[i].childNodes[0].firstChild.nodeValue;
    check_status = newRow.insertCell(newRow.cells.length);
    check_status.innerHTML = xmlNodes[i].childNodes[1].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[7].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[2].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[3].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[5].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[6].firstChild.nodeValue;
    client_name  = newRow.insertCell(newRow.cells.length);
    client_name.innerHTML  = xmlNodes[i].childNodes[8].firstChild.nodeValue;
}

这段代码也存在编程风格问题，但这也是另一回事。我希望这能回答你的问题。

【讨论】：

  • 我真的不知道关于脚本的东西（我知道我是通过在网上找到可以让我导入 xml 的东西学到的）所以我对此知之甚少。我尝试了您的代码，将开始代码放在文件的开头，并将 if 代码放在循环中的多个位置，但它不起作用。我在函数 addTableRowsFromXmlDoc 开头的代码中尝试了相同的方法，但没有奏效。我改变了循环中的变量，按照它应该的方式工作，这很好。
  • I GOT IT WORKING 将我原来的 jQuery 放在一路如下： function addTableRowsFromXmlDoc(xmlNodes,tableNode) { .................. ....... theTable.appendChild(tableNode); $("td:nth-child(7):contains('Windows Service Check')").addClass('disaster'); }
  • 你有办法给第 8 列那种颜色吗？
  • 这确实是一个新问题，但是td.foo, td.foo + td { background-color: red; }
猜你喜欢
  • 1970-01-01
  • 2021-03-23
  • 1970-01-01
  • 1970-01-01
  • 2015-02-03
  • 2014-09-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode