我的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”，而是使用forling for eachtrhing来代替。因此，而不是使用这样的：

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。
• 将所有内容放在范围函数中，所以我们没有创建任何全局变量。

（我不得不改变缩进风格，恐怕我也不太“神交”你的。）