javascript XML数据显示为HTML一例

 更新时间:2008年12月23日 16:00:06   作者:  
通过Javascript把xml转换成html格式输出一列
person.htm: 
复制代码 代码如下:

<html>
<body>
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{
// for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
//for Mozilla, Firefox, Opera,
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("person.xml");
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("person");
for (i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("myname")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("myid")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>

person.xml:
复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<root>
<person>
<myname>chwuweig</myname>
<myid>123456</myid>
</person>
<person>
<myname>cig</myname>
<myid>526636</myid>
</person>
<person>
<myname>chwg</myname>
<myid>524216</myid>
</person>
</root>

相关文章

  • ES6入门教程之let和const命令详解

    ES6入门教程之let和const命令详解

    最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉。通过学习网上的教程后觉着有必要整理下遇到的let和const命令,所以这篇文章主要给大家介绍了ES6中let和const命令的相关资料,需要的朋友可以参考下。
    2017-05-05
  • js使用文件流下载csv文件的实现方法

    js使用文件流下载csv文件的实现方法

    这篇文章主要给大家介绍了关于js使用文件流下载csv文件的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • JS中如何轻松遍历对象属性的方式总结

    JS中如何轻松遍历对象属性的方式总结

    这篇文章主要给大家总结介绍了关于在JS中如何轻松遍历对象属性的方式,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • javascript实时显示北京时间的方法

    javascript实时显示北京时间的方法

    这篇文章主要介绍了javascript实时显示北京时间的方法,涉及javascript操作时间显示的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 关于axios返回空对象的问题解决

    关于axios返回空对象的问题解决

    这篇文章主要给大家介绍了关于axios返回空对象的问题解决方法,文中介绍的非常详细,相信对大家学习或者使用axios具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • javascript弹出窗口中增加确定取消按钮

    javascript弹出窗口中增加确定取消按钮

    本文给大家分享的是在ECShop的项目中使用到的一个小功能,使用JavaScript实现弹出窗口中增加确定取消按钮,有需要的小伙伴可以参考下
    2016-06-06
  • javascript中创建对象的几种方法总结

    javascript中创建对象的几种方法总结

    以下几种,是javascript中最常用的创建对象的方式。初学者看到后,可能会晕掉,甚至会觉得担心。其实完全不用担心,这些种方式,只需要掌握一两种,对其他的几种只需要理解就好了
    2013-11-11
  • 一篇文章搞定JavaScript类型转换(面试常见)

    一篇文章搞定JavaScript类型转换(面试常见)

    这篇文章主要介绍了一篇文章搞定JavaScript类型转换(面试常见),非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • 深入理解JS中attribute和property的区别

    深入理解JS中attribute和property的区别

    property 和 attribute非常容易混淆,但实际上,二者是不同的东西,属于不同的范畴,本文就详细的介绍一下JS中attribute和property的区别 ,感兴趣的可以了解一下
    2022-02-02

最新评论