Question

我有一个带有表格的 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>

Answer 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导入）

1 个答案: