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("");
    }
})();

这是 minimal 重写，请注意实际变化的程度。我基本上做了这些事情：

将其设为异步请求。
在数组中构建标记。
将childNodes[0]更改为firstChild。
通过在占位符上分配innerHTML将表放在页面上。
声明函数顶部的所有变量（that's where they are anyway）。
确保所有变量实际上已声明（您可能已在未显示的代码中声明它们，但以防万一），因此我们不会成为{{3}的牺牲品}。
将所有内容放在作用域函数中，这样我们就不会创建任何全局变量。

（我不得不改变缩进的风格，我担心我不太喜欢“你的”。）

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

1 个答案: