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

Question

我正在尝试生成一个网站来显示客户网站的状态。我被 java 脚本中的一些条件格式卡住了。

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

我遇到的问题是脚本的最后一部分。我想要的是一些帮助，让脚本在名为 .根据单词设置不同的颜色和文字。其他任何东西都有自己单独的格式。

出于某种原因（一定是一个非常愚蠢的原因），名为 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 将表格放在页面上。
• 在函数顶部声明所有变量（如that's where they are anyway）。
• 确保所有变量 实际上已声明（您可能已经在未显示的代码中声明了它们，但以防万一），因此我们不会成为 The Horror of Implicit Globals 的牺牲品。
• 将所有内容都放在一个作用域函数中，这样我们就不会创建任何全局变量。

（我不得不更改缩进样式，恐怕我没有完全“理解”你的。）