0

我试图生成一个网站来显示客户网站的状态。我被困在 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

有人可以帮忙吗？

4

1 回答 1

0

在这段代码中：

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通过分配给占位符将表格放在页面上。
  • 在函数的顶部声明所有变量（因为那是它们所在的位置）。
  • 确保实际上声明了所有变量（您可能已经在未显示的代码中声明了它们，但以防万一），因此我们不会成为隐式全局恐怖的牺牲品。
  • 将所有内容都放在一个作用域函数中，这样我们就不会创建任何全局变量。

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

于 2013-07-05T12:40:26.720 回答