stackoom
  简体   繁体   中英

Change background color of a table cell based on its value(Imported by XML)

 原文  2017-11-29 14:13:30  6   1    javascript/ html/ css/ xml

Question

I've got a html file with a table in it, XML data gets imported and processed to tbody . Column 7 and 8 should get a background-color based on what Column 7's value is. I've got 5 different classes (5 different colors), they're at the top of my css

I've tried some JQuery : (underneath the /div in the html) 

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

But it won't work with the xml import (tried copying the code out of the browser and it worked, copied everything under tbody and pasted it over tbody in the html file.)

I hope that somebody can help me :)

Here is my code:

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: (import of 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>

1 answers

solution1
 0  2017-11-29 14:24:54

I guess you call your jQuery construction after the table is built. I would do that at the point of generating a row. Instead of using a complicated jQuery traversal through all DOM elements that safisfy your selector, which is always expensive, I would test a value that you get from XML against your 'disaster' value (you might want to move it to a variable or a set of variables, but that's a different story).

Do something like this: 

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

Besides that, you don't need to redeclare variables in the loop, so you loop will better look like this: 

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

There are programming style issues with this code too, but this is also another story. I hope this answers your question.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to change the background color of a cell based on its value using javascript? Using javascript to change table cell background color based on json value Change Text And Background Color Of Table Cell Based On Text Value Change cell background color based on value? How to change cell background color based on its value to certain columns only how to dynamically change a table row background color when a link value within its cell changes when clicked change between 3 different background color based on cell value how to change the text color of a table cell based on value Iterate through table and change td background color based on span value React Bootstrap Table: Inline Style to Change Background Color Based on Value
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM