我的Javascript在表格单元格中找到的条件格式

Question

我试图生成一个网站来显示客户网站的状态。 我被困在jave脚本中的一些条件格式上。

<script>
if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","example.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    document.write("<table cellpadding='5' cellspacing='0' width='100%'>");
    document.write("<th>SITE:</th>");
    document.write("<th>URL:</th>");
    document.write("<th>STATUS:</th>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
    { 
    document.write("<tr><td style='font-size:10px'>");
    document.write(x[i].getElementsByTagName("SITE")[0].childNodes[0].nodeValue);
    document.write("</td><td style='font-size:10px'>");
    document.write(x[i].getElementsByTagName("URL")[0].childNodes[0].nodeValue);
    document.write("</td><td style='font-size:10px'>");
    document.write(x[i].getElementsByTagName("STATUS")[0].childNodes[0].nodeValue);
var STAT=xmlDoc.getElementsByTagName("STATUS");
document.write(STAT)
        if (STAT=="UP")
            {
            document.write('<div style="background-color:#2EFE2E">UP</div>')
            }
        else
            {
            if (STAT=="DOWN")
                {
                document.write('<div style="background-color:#FF0000">DOWN</div>')
                }
            else
                {
                document.write('<div style="background-color:#EDA200">UNKNOWN</div>')
                }
            }
    document.write("</td></tr>");
}
    document.write("</table>");
</script>

我遇到的问题是脚本的最后一部分。 我想要一些帮助，以使脚本在名为的示例XML标签中查找单词“ UP”或“ DOWN”。 根据单词设置不同的颜色和文本。 其他所有内容都有其单独的格式。

由于某种原因（一定是一个非常愚蠢的原因），名为STATUS的表单元仅显示格式的最后一部分。 因此，与其查找“ UP”或“ DOWN”一词，还不如使用其他格式。 所以不要使用这个：

if (STAT=="UP")
        {
        document.write('<div style="background-color:#2EFE2E">UP</div>')
        }

它正在使用此：

else
        {
        document.write('<div style="background-color:#EDA200">UNKNOWN</div>')
        }

输出示例如下： http : //echelonservices.co.uk/test/CUSTOMERS.html

有人可以协助吗？

Answer 1

在此代码中：

var STAT=xmlDoc.getElementsByTagName("STATUS");
document.write(STAT)
if (STAT=="UP")

...您正在将一个元素（ STATUS元素）与一个字符串进行比较。 我想您可能是说：

var STAT=xmlDoc.getElementsByTagName("STATUS")[0].firstChild.nodeValue;
document.write(STAT)
if (STAT=="UP")

...以便获取其第一个文本节点的值。 或者您可能想要[x]而不是[0] ，但不清楚。

或者实际上，看一下周围的代码：

var STAT = x[i].getElementsByTagName("STATUS")[0].childNodes[0].nodeValue;
document.write(STAT);
if (STAT=="UP")

（但请注意，您可以使用firstChild而不是childNodes[0] 。）

---

但是我可以强烈建议不要使用同步ajax请求，也不要使用document.write 。 而是将占位符放在HTML中您要将此表放到的位置：

<div id="placeholder"></div>

...然后将其放在页面的末尾：

(function() {
    var xmlhttp;

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = handleReadyStateChange;
    xmlhttp.open("GET", "example.xml"); // Async, not sync
    xmlhttp.send();

    function handleReadyStateChange() {
        if (xmlhttp.readyState == 4 &&
            xmlhttp.status >= 200 &&
            xmlhttp.status < 300) {

            buildTable(xmlhttp.responseXML);
        }
    }

    function buildTable(xmlDoc) {
        var markup, x, i, stat;

        // Build the markup in an array
        markup = ["<table cellpadding='5' cellspacing='0' width='100%'></table>"];
        markup.push("<th>SITE:</th>");
        markup.push("<th>URL:</th>");
        markup.push("<th>STATUS:</th>");
        x = xmlDoc.getElementsByTagName("CD");
        for (i = 0; i < x.length; i++) {
            markup.push("<tr><td style='font-size:10px'>");
            markup.push(x[i].getElementsByTagName("SITE")[0].firstChild.nodeValue);
            markup.push("</td><td style='font-size:10px'>");
            markup.push(x[i].getElementsByTagName("URL")[0].firstChild.nodeValue);
            markup.push("</td><td style='font-size:10px'>");
            stat = x[i].getElementsByTagName("STATUS")[0].firstChild.nodeValue;
            markup.push(stat);
            switch (stat) {
                case "UP":
                    markup.push('<div style="background-color:#2EFE2E">UP</div>')
                    break;
                case "DOWN":
                    markup.push('<div style="background-color:#FF0000">DOWN</div>')
                    break;
                default:
                    markup.push('<div style="background-color:#EDA200">UNKNOWN</div>')
                    break;
            }
            markup.push("</td></tr>");
        }
        markup.push("</table>");

        // Put it in the placeholder
        document.getElementById("placeholder").innerHTML = markup.join("");
    }
})();

这是一个最小的重写，请注意实际上没有多少更改。 我基本上做了这些事情：

• 使其成为异步请求。
• 在数组中构建标记。
• 将childNodes[0]更改为firstChild 。
• 通过分配给占位符上的innerHTML将表放在页面上。
• 在函数的顶部声明所有变量（因为它们始终在此位置）。
• 确保所有variales 在事实上宣告（你可能有他们的代码，你没有表现出声明，但以防万一），所以我们没有堕入隐全局的恐怖 。
• 将所有内容都放在作用域函数中，这样我们就不会创建任何全局变量。

（我不得不更改缩进样式，恐怕我不太“喜欢”您的缩进样式。）