2016-08-13 52 views
0

在按钮单击后,我能够成功地在我的页面上传递XML日期,但在一种情况下挣扎,即如果XML文件中的某些条目为空,如何处理情况。此外,我们如何实现在同一个表的布局和空条件使用JSON使用AJAX和javascript在表格布局中传递XML日期

<!DOCTYPE html> 
<html> 
<style> 
table,th,td { 
    border : 1px solid black; 
    border-collapse: collapse; 
} 
th,td { 
    padding: 5px; 
} 
th{ 
    background-color:#BBB; 
} 
</style> 
<body> 

<button type="button" onclick="loadDoc()">Get my CD collection</button> 
<br><br> 
<table id="demo"></table> 

<script> 
function loadDoc() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     myFunction(xhttp); 
    } 
    }; 
    xhttp.open("GET", "cd_catalog.xml", true); 
    xhttp.send(); 
} 
function myFunction(xml) { 
    var i; 
    var xmlDoc = xml.responseXML; 
    var table="<tr><th>Artist</th><th>Title</th><th>Country</th><th>Price</th><th>CompaYearny</th></tr>"; 
    var x = xmlDoc.getElementsByTagName("CD"); 
    for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" + 
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + 
    "</td><td>" + 
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + 
    "</td><td>" + 
    x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + 
    "</td><td>"+ 

    x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue + 
    "&nbsp;"+ 

    x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + 
    "</td><td> "+ 

    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + 
    "</td></tr>"; 
    } 
    document.getElementById("demo").innerHTML = table; 
} 
</script> 

</body> 
</html> 

<CATALOG> 
<CD> 
<TITLE>Empire Burlesque</TITLE> 
<ARTIST>Bob Dylan</ARTIST> 
<COUNTRY>USA</COUNTRY> 
<COMPANY>Columbia</COMPANY> 
<PRICE>10.90</PRICE> 
<YEAR>1985</YEAR> 
</CD> 
<CD> 
<TITLE>Hide your heart</TITLE> 
<ARTIST>Bonnie Tyler</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>CBS Records</COMPANY> 
<PRICE>9.90</PRICE> 
<YEAR>1988</YEAR> 
</CD> 
<CD> 
<TITLE>Greatest Hits</TITLE> 
<ARTIST>Dolly Parton</ARTIST> 
<COUNTRY>USA</COUNTRY> 
<COMPANY>RCA</COMPANY> 
<PRICE>9.90</PRICE> 
<YEAR>1982</YEAR> 
</CD> 
<CD> 
<TITLE>Still got the blues</TITLE> 
<ARTIST>Gary Moore</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>Virgin records</COMPANY> 
<PRICE>10.20</PRICE> 
<YEAR>1990</YEAR> 
</CD> 
<CD> 
<TITLE>Eros</TITLE> 
<ARTIST>Eros Ramazzotti</ARTIST> 
<COUNTRY>EU</COUNTRY> 
<COMPANY>BMG</COMPANY> 
<PRICE>9.90</PRICE> 
<YEAR>1997</YEAR> 
</CD> 
<CD> 
<TITLE>One night only</TITLE> 
<ARTIST>Bee Gees</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>Polydor</COMPANY> 
<PRICE>10.90</PRICE> 
<YEAR>1998</YEAR> 
</CD> 
<CD> 
<TITLE>Sylvias Mother</TITLE> 
<ARTIST>Dr.Hook</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>CBS</COMPANY> 
<PRICE>8.10</PRICE> 
<YEAR>1973</YEAR> 
</CD> 
<CD> 
<TITLE>Maggie May</TITLE> 
<ARTIST>Rod Stewart</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>Pickwick</COMPANY> 
<PRICE>8.50</PRICE> 
<YEAR>1990</YEAR> 
</CD> 
<CD> 
<TITLE>Romanza</TITLE> 
<ARTIST>Andrea Bocelli</ARTIST> 
<COUNTRY>EU</COUNTRY> 
<COMPANY>Polydor</COMPANY> 
<PRICE>10.80</PRICE> 
<YEAR>1996</YEAR> 
</CD> 
<CD> 
<TITLE>When a man loves a woman</TITLE> 
<ARTIST>Percy Sledge</ARTIST> 
<COUNTRY>USA</COUNTRY> 
<COMPANY>Atlantic</COMPANY> 
<PRICE>8.70</PRICE> 
<YEAR>1987</YEAR> 
</CD> 
<CD> 
<TITLE>Black angel</TITLE> 
<ARTIST>Savage Rose</ARTIST> 
<COUNTRY>EU</COUNTRY> 
<COMPANY>Mega</COMPANY> 
<PRICE>10.90</PRICE> 
<YEAR>1995</YEAR> 
</CD> 
<CD> 
<TITLE>1999 Grammy Nominees</TITLE> 
<ARTIST>Many</ARTIST> 
<COUNTRY>USA</COUNTRY> 
<COMPANY>Grammy</COMPANY> 
<PRICE>10.20</PRICE> 
<YEAR>1999</YEAR> 
</CD> 
<CD> 
<TITLE>For the good times</TITLE> 
<ARTIST>Kenny Rogers</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>Mucik Master</COMPANY> 
<PRICE>8.70</PRICE> 
<YEAR>1995</YEAR> 
</CD> 
<CD> 
<TITLE>Big Willie style</TITLE> 
<ARTIST>Will Smith</ARTIST> 
<COUNTRY>USA</COUNTRY> 
<COMPANY>Columbia</COMPANY> 
<PRICE>9.90</PRICE> 
<YEAR>1997</YEAR> 
</CD> 
<CD> 
<TITLE>Tupelo Honey</TITLE> 
<ARTIST></ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY></COMPANY> 
<PRICE>8.20</PRICE> 
<YEAR>1971</YEAR> 
</CD> 
<CD> 
<TITLE>Soulsville</TITLE> 
<ARTIST>Jorn Hoel</ARTIST> 
<COUNTRY>Norway</COUNTRY> 
<COMPANY>WEA</COMPANY> 
<PRICE>7.90</PRICE> 
<YEAR>1996</YEAR> 
</CD> 
<CD> 
<TITLE>The very best of</TITLE> 
<ARTIST></ARTIST> 
<COUNTRY>K</COUNTRY> 
<COMPANY>Island</COMPANY> 
<PRICE>8.90</PRICE> 
<YEAR>1990</YEAR> 
</CD> 
<CD> 
<TITLE>Stop</TITLE> 
<ARTIST>Sam Brown</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>A and M</COMPANY> 
<PRICE>8.90</PRICE> 
<YEAR>1988</YEAR> 
</CD> 
<CD> 
<TITLE>Bridge of Spies</TITLE> 
<ARTIST>T'Pau</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY></COMPANY> 
<PRICE></PRICE> 
<YEAR>1987</YEAR> 
</CD> 
<CD> 
<TITLE>Private Dancer</TITLE> 
<ARTIST>Tina Turner</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>Capitol</COMPANY> 
<PRICE>8.90</PRICE> 
<YEAR>1983</YEAR> 
</CD> 
<CD> 
<TITLE>Midt om natten</TITLE> 
<ARTIST>Kim Larsen</ARTIST> 
<COUNTRY>EU</COUNTRY> 
<COMPANY>Medley</COMPANY> 
<PRICE>7.80</PRICE> 
<YEAR>1983</YEAR> 
</CD> 
<CD> 
<TITLE>Pavarotti Gala Concert</TITLE> 
<ARTIST>Luciano Pavarotti</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY></COMPANY> 
<PRICE>9.90</PRICE> 
<YEAR>1991</YEAR> 
</CD> 
<CD> 
<TITLE>The dock of the bay</TITLE> 
<ARTIST>Otis Redding</ARTIST> 
<COUNTRY>USA</COUNTRY> 
<COMPANY>Atlantic</COMPANY> 
<PRICE>7.90</PRICE> 
<YEAR>1987</YEAR> 
</CD> 
<CD> 
<TITLE>Picture book</TITLE> 
<ARTIST></ARTIST> 
<COUNTRY>EU</COUNTRY> 
<COMPANY></COMPANY> 
<PRICE>7.20</PRICE> 
<YEAR>1985</YEAR> 
</CD> 
<CD> 
<TITLE>Red</TITLE> 
<ARTIST>The Communards</ARTIST> 
<COUNTRY>UK</COUNTRY> 
<COMPANY>London</COMPANY> 
<PRICE>7.80</PRICE> 
<YEAR>1987</YEAR> 
</CD> 
<CD> 
<TITLE>Unchain my heart</TITLE> 
<ARTIST>Joe Cocker</ARTIST> 
<COUNTRY>USA</COUNTRY> 
<COMPANY>EMI</COMPANY> 
<PRICE>8.20</PRICE> 
<YEAR>1987</YEAR> 
</CD> 
</CATALOG> 
+0

'如果某些条目是XML file'内空的东西 - 有在您的示例XML文件中没有空 - 所以......也许不必担心它 - 或者改变空到空字符串 –

+0

我想要创建一个条件,即使空条目也被接受来做 –

+0

定义一个空条目。你的意思是空的或不存在的? –

回答

1

创建一个函数:

function smartValue(root, tag) { 
    return (root.getElementsByTagName(tag).length && 
      root.getElementsByTagName(tag)[0].childNodes.length && 
      root.getElementsByTagName(tag)[0].childNodes[0].nodeValue 
      ) || ''; 
} 

然后,而不是

x[i].getElementsByTagName("whatever")[0].childNodes[0].nodeValue 

smartValue(x[i], "whatever") 
+0

谢谢,Jaromanda X,但不是在我的结尾工作。你有没有可用的小提琴或jsbin链接,你可能已经测试过了。 –

+1

对不起,回复更新 –

+0

太棒了,这段代码有效。我们又将如何测试JSON文件中的相同条件?谢谢 –