我希望你能阅读我的代码，我的本地主机上有一个 XML 文件，我希望它从该文件中提取标题和年份(当前有标题、年份、艺术家、价格和国家/地区)，同时维护页面上的H1和按钮。
H1 文本和按钮在单击时消失，我希望它与结果保留在同一页面上。
<h1>Show the Album list</h1>
<script>
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
function CdCatalog()
{
document.write("<table border='1'><th>TITLE</th><th>YEAR</th>");
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("YEAR")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
}
</script>
最佳答案
问题是您正在使用 document.write对于按钮的单击事件，这是在文档关闭之后......这意味着它会覆盖所有内容。由于您的页面很简单，只有 <h1>和按钮，看起来只有这些东西被隐藏，但它会是页面上的所有东西(如果你有更多的话)。
解决方案是使用.appendChild和/或 .innerHTML动态添加内容。我会在一分钟内提供解决方案:)
更新:
既然您使用的是表，那么您不妨使用 native 方法 .insertRow和.insertCell这使得表创建变得更加容易。以下是您可以整体使用的示例:
function CdCatalog(xmlDoc) {
var table = document.createElement("table");
var thead = table.createTHead(); // Where "header" rows go
// `insertRow` creates a <tr> element and appends it to `thead` automatically, returning the element
var tr = thead.insertRow(-1);
var td = document.createElement("th"); // No special method for creating "th" elements
td.innerHTML = "TITLE"; // Set its inner content
tr.appendChild(th); // Add it to the row (which is in the header)
td = document.createElement("td");
td.innerHTML = "YEAR";
tr.appendChild(td);
var x = xmlDoc.getElementsByTagName("CD");
// "tbody" is where a table's content goes, whether you do this explicitly or not
var tbody = table.tBodies[0];
for (var i = 0; i < x.length; i++) {
tr = tbody.insertRow(-1);
// `insertCell` creates a <td> element and appends it to `tr` automatically, returning the element
td = tr.insertCell(-1);
td.innerHTML = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
td = tr.insertCell(-1);
td.innerHTML = x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
// Actually add the table to the DOM (the <body> element in this case)...you can specify where else to put it
document.body.appendChild(table);
}
// Make sure DOM is ready for manipulation
window.onload = function () {
var btn = document.getElementById("button_id"); // Whatever your button is
// Bind the "click" event for the button
btn.onclick = function () {
// Make your AJAX request
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "cd_catalog.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
// Pass the result to the function, instead of making everything global and sharing
CdCatalog(xmlDoc);
};
};
除非我弄错了，否则你不能嵌套 <td> <table>里面...您必须将它们嵌套在 <tr> 中...嵌套在<table>中
关于javascript - 尝试创建一个运行脚本的按钮，但是 H1 和按钮在单击时消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13596021/