[英]I want to hide div if html data is empty, I want to show if it is not. HTML JavaScript
[英]want to show xml file data in div in html
我有Java脚本代码,我只想使用html显示div中的xml数据,所以我可以使用div显示html中的xml数据的内容
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", "cd_catalog.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.write("<table border='1'>");
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i < x.length; i++) {
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</head>
<body onload="displayCD(2)">
<div id='showCD'>
</div>
不要使用document.write
。
获取所需的div,例如:
var the_div = document.getElementByI("showCD");
然后设置其内容(使用TextNode):
var text_node = document.createTextNode(xmlDoc);
the_div.appendChild(text_node);
或xmlhttp.responseText
而不是.responseXML
。 我不知道responseXML
是否是标准的。
尝试这个,
<html>
<head>
<script type="text/javascript">
function displayCD(){
alert(1);
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=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
xmlDoc = xmlhttp.responseXML;
console.log(xmlhttp.responseXML);
var tableData = "<table border='1'>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i < x.length; i++) {
tableData += "<tr><td>"+x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue+"</td>";
tableData += "<td>"+x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue+"</td></tr>";
}
document.getElementById('showCD').innerHTML=tableData;
}
}
xmlhttp.open("GET", "cd_catalog.xml", false);
xmlhttp.send();
}
</script>
</head>
<body onload="displayCD(2)">
<div id='showCD'>
</div>
</body>
</html>
<div>
<table id="cds">
</table>
</div>
<script type="text/javascript">
var xhr= window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange= function() {
if (this.readyState===4 || this.status===200)
populateTable(this.responseXML);
};
xhr.open('GET', 'cd_catalog.xml', true);
xhr.send();
function populateTable(xml) {
var table= document.getElementById('cds');
var cds= xml.getElementsByTagName('CD');
for (var i= 0; i<cds.length; i++) {
var row= table.insertRow(-1);
function getProperty(name) {
var el= cds[i].getElementsByTagName(name)[0];
if (el.firstChild)
return el.firstChild.data;
return ''; // allow empty elements
}
function addCell(value) {
row.insertCell(-1).appendChild(document.createTextNode(value));
}
addCell(getProperty('ARTIST'));
addCell(getProperty('TITLE'));
}
};
</script>
它并不那么复杂。
<body>
<div id="showCD"></div>
<script>
var divCDs = document.getElementById('showCD');
var List = xml.getElementsByTagName('CD');
for (var i = 0; i < List.length; i++) {
// dynamic DIV.
var new_div = document.createElement('div');
new_div.innerHTML = List[i].getElementsByTagName("TITLE") [0].childNodes[0].nodeValue;
divCDs.appendChild(new_div);
}
</script>
</body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.