我的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。
• 將所有內容放在範圍函數中，所以我們沒有創建任何全局變量。

（我不得不改變縮進風格，恐怕我也不太「神交」你的。）