Javascript 如何用XML数据动态填充HTML表？_Javascript_Html_Xml_Xml Parsing_Html Parsing

Javascript 如何用XML数据动态填充HTML表？

javascript html xml

Javascript 如何用XML数据动态填充HTML表？,javascript,html,xml,xml-parsing,html-parsing,Javascript,Html,Xml,Xml Parsing,Html Parsing,我有一个如下所示的XML： <?xml version="1.0" encoding="utf-8"?> <TestRun id="abc-jhhg-yuh" name="Demo" runUser="Admin" xmlns="http://microsoft.com/schemas/VisualStudio/TeamTest/2010"> <

我有一个如下所示的XML：

<?xml version="1.0" encoding="utf-8"?>
<TestRun id="abc-jhhg-yuh" name="Demo" runUser="Admin" xmlns="http://microsoft.com/schemas/VisualStudio/TeamTest/2010">
 <ResultSummary outcome="Failed">
    <Counters total="5" executed="5" passed="3" failed="2" error="0" timeout="0" aborted="0" inconclusive="0" passedButRunAborted="0" notRunnable="0" notExecuted="0" disconnected="0" warning="0" completed="0" inProgress="0" pending="0" />
  </ResultSummary>
</TestRun>

我有一个HTML文件，我希望这些数据以如下所示的表格格式动态填充

我的HTML“脚本”是这样的

<!DOCTYPE html>
<html>
<body>
<h1> Test Summary Details </h1> 
<script>
if(window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Demo.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1' width='25%' style='font-size:15px;'>");
document.write("<tr><th>Result Type</th><th>Count</th></tr>");
var nodes=xmlDoc.getElementsByTagName("ResultSummary");
var total= nodes[0].childNodes[0].getAttributeValue("total");
document.write("total");
document.write("</td><td>");
document.write(total);
document.write("</td><td>");
document.write("</table>");
</script>
</body>
</html>


测试摘要详细信息
if（window.XMLHttpRequest）
{
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“GET”，“Demo.xml”，true）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
文件。填写（“”）；
文件。写入（“结果类型计数”）；
var nodes=xmlDoc.getElementsByTagName（“ResultSummary”）；
var total=nodes[0]。childNodes[0]。getAttributeValue（“total”）；
文件。填写（“总计”）；
文件。填写（“”）；
文件。填写（总计）；
文件。填写（“”）；
文件。填写（“”）；

但我无法填充数据。我该怎么做？

//模拟http响应
const mock_response=新响应(`
`)
//使用新的获取api而不是旧的XMLHttpRequest
//TODO:将url更改为“Demo.xml”
取（'https://httpbin.org/get）。然后（异步响应=>{
//使用模拟响应
const str=wait mock_response.text（）
//TODO:删除上面的内容并切换为使用实际响应.text（）
//const str=wait response.text（）
const xml=new DOMParser（）.parseFromString（str，'text/xml'）
const counters=xml.querySelector（'counters'）
const table=document.createElement（'表'）
表1.border=1
const body=table.createTBody（）
for（设x为'total，executed，passed，failed，inconclusive，warning，notExecuted'。拆分（'，'））{
const row=body.insertRow（）
常量attr=row.insertCell（）
const value=row.insertCell（）
attr.innerText=x
value.innerText=counters.getAttribute（x）
console.log（）
}
document.body.append（表）
})

感谢您提供的解决方案。上面的代码对于静态xml很好，但是xml中的值（总计、已执行、已传递、失败、不确定、警告、notExecuted）对我来说是变化的。那么，在模拟http响应时，有没有办法动态读取XML。change

const str=isDemo？wait res.text（）：wait response.text（）

到just

const str=wait response.text（）

并更改

https://httpbin.org/get

到您自己的url

Demo.xml

谢谢。我是否要提取（'C:\Users\Downloads\Demo.xml'）？像这样，我无法获得值。我也使用了fetch（'Demo.xml'）。但这并没有起作用。我遗漏了什么吗？你必须安装一个服务器来响应文件。浏览器对客户端文件系统没有任何访问权限（除非您使用新的实验性本机文件系统访问请求权限），然后您甚至不再使用ajax（XMLHttpRequest或fetch api），然后您正在读取本地文件而不是是的，我想读取本地XML文件，然后用HTML填充数据。可能吗？