如何从PC上存储的文件中提取XML数据，并使用javascript填充HTML表格？
请参见下面我的XML和HTML： 我只想使用XML文件中的数据生成一个HTML表。 （此XML文件位于我的C目录中，但与HTML文件位于同一文件夹中。） （C:/Users/Admin/Documents/GameStats/main.html-->是主html文件）。 （C:/Users/Admin/Documents/GameStats/game.xml-->为xml文件） 我将感谢任何帮助。我不介意JAVASCRIPT、AJAX和JQUERY。 如果你能告诉我我的错误，我将不胜感激如何从PC上存储的文件中提取XML数据，并使用javascript填充HTML表格？,javascript,html,xml,dom,html-table,Javascript,Html,Xml,Dom,Html Table,请参见下面我的XML和HTML： 我只想使用XML文件中的数据生成一个HTML表。 （此XML文件位于我的C目录中，但与HTML文件位于同一文件夹中。） （C:/Users/Admin/Documents/GameStats/main.html-->是主html文件）。 （C:/Users/Admin/Documents/GameStats/game.xml-->为xml文件） 我将感谢任何帮助。我不介意JAVASCRIPT、AJAX和JQUERY。 如果你能告诉我我的错误，我将不胜感激 <
<?xml version="1.0" encoding="UTF-8"?>
<GAME>
<COUNTRY>
<NAME>China</NAME>
<PLAYERS>80,000</PLAYERS>
<KILLS>35,060</KILLS>
</COUNTRY>
<COUNTRY>
<NAME>Pakistan</NAME>
<PLAYERS>234</PLAYERS>
<KILLS>340</KILLS>
</COUNTRY>
<COUNTRY>
<NAME>Indonesia</NAME>
<PLAYERS>867</PLAYERS>
<KILLS>546</KILLS>
</COUNTRY>
</GAME>
中国
80,000
35,060
巴基斯坦
234
340
印度尼西亚
867
546
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadXMLDoc()">Get Game Stats</button>
<br><br>
<table id="demo"></table>
<script>
function loadXMLDoc() {
//document.body.style.backgroundColor = "red";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "/game.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Name</th><th>Players</th><th>Kills></th></tr>";
var x = xmlDoc.getElementsByTagName("COUNTRY");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("PLAYERS")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("KILLS")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充物：5px；
}
获取游戏统计数据
函数loadXMLDoc（）{
//document.body.style.backgroundColor=“红色”；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
我的职能（本）；
}
};
open（“GET”，“/game.xml”，true）；
xmlhttp.send（）；
}
函数myFunction（xml）{
var i；
var xmlDoc=xml.responseXML；
var table=“NamePlayersKills>”；
var x=xmlDoc.getElementsByTagName（“国家”）；
对于（i=0；i所以，有两个问题：你需要一个本地测试服务器来尝试这样的东西，除非你想不断地将文件上传到远程服务器来测试它们。有很多方法可以设置本地测试服务器（Python、PHP有一个内置的测试服务器、虚拟机等等）但有了xampp，您将在大约5分钟内启动并运行。它是免费的，您可以找到有关设置它的视频或教程，尽管很简单
其次是加载XML，我使用以下方法：
function loadXML() {
var urlVar = ('myXML.xml'); // where your xml file lives
var succVar = xmlLoaded; // what to do after it's loaded
$.ajax({
type: "GET",
url: urlVar,
dataType: "xml",
success: succVar
});
}
function xmlLoaded(data) {
var loadedXML = data;
console.log('xml', $(loadedXML).find('game').html()); // display the content of <game> in your console window
}
函数loadXML（）{
var urlVar=（'myXML.xml'）；//xml文件所在的位置
var-succVar=xmloaded；//加载后要做什么
$.ajax({
键入：“获取”，
url:urlVar，
数据类型：“xml”，
成功：succVar
});
}
函数xmlLoaded（数据）{
var loadedXML=数据；
console.log（'xml'，$（loadedXML）.find（'game'）.html（））；//在控制台窗口中显示的内容
}
应该在Web服务器上运行才能工作。在windows上，您可能可以使用文件：//
协议，但如果我的记忆良好，我相信浏览器可能需要启用标志才能允许文件协议。可能更容易构建一个小的nodejs Web服务器来支持它。您遇到了什么问题？我看不出有什么问题en我单击按钮。没有生成任何内容。我也尝试过在服务器上运行它，同样的问题也会出现。@mrkn0007当你说“我也尝试过在服务器上运行它”时，你是什么意思？你能更新你的问题以包括你尝试过的内容吗？