XML转换为HTML

本文介绍如何利用JavaScript解析XML文件,并将其数据转换为HTML表格进行展示。重点在于实现流程,包括选择合适的解析器、创建HTML表格结构、获取XML节点信息并填充到表格中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

from:http://www.w3school.com.cn/xml/xml_to_html.asp

在上一节中,我们讲解了如何通过 JavaScript 来解析 XML 并访问 DOM。

本例遍历一个 XML 文件 (cd_catalog.xml),然后把每个 CD 元素显示为一个 HTML 表格行:

<html>
<body>

<script type="text/javascript">
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("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>

</body>
</html>

TIY:在 HTML 表格中显示 XML 数据

例子解释:

  1. 检测浏览器,然后使用合适的解析器来加载 XML
  2. 创建一个 HTML 表格(<table border="1">)
  3. 使用 getElementsByTagName() 来获得所有 XML 的 CD 节点
  4. 针对每个 CD 节点,把 ARTIST 和 TITLE 中的数据显示为表格数据
  5. 用 </table> 结束表格

如需更多有关 JavaScript 和 XML DOM 的信息,请访问我们的 XML DOM 教程

跨域访问

出于安全方面的原因,现代的浏览器不允许跨域的访问。

这意味着,网页以及它试图加载的 XML 文件,都必须位于相同的服务器上。

W3School 的实例所打开的 XML 文件位于 W3School 的域上。

假如你打算在自己的网页上使用上面的例子,则必须把 XML 文件放到自己的服务器上。否则,xmlDoc.load() 将产生错误 "Access is denied"。

 

 

from:http://www.w3school.com.cn/xml/xml_to_html.asp

转载于:https://www.cnblogs.com/melody-emma/p/4303678.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值