脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS读取XML文件数据并以table形式显示数据

JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)

 更新时间：2016年06月02日 12:01:44   作者：aparche  
这篇文章主要介绍了JS读取XML文件数据并以table形式显示数据的方法,涉及javascript针对xml节点操作及HTML表格操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS读取XML文件数据并以table形式显示数据的方法。分享给大家供大家参考，具体如下：

先看xml文件：

<?xml version="1.0" standalone="yes"?>
<student>
 <stuinfo>
  <stuName>张秋丽</stuName>
  <stuSex>女  </stuSex>
  <stuAge>18</stuAge>
 </stuinfo>
 <stuinfo>
  <stuName>李文才</stuName>
  <stuSex>男  </stuSex>
  <stuAge>31</stuAge>
 </stuinfo>
 <stuinfo>
  <stuName>李斯文</stuName>
  <stuSex>男  </stuSex>
  <stuAge>22</stuAge>
 </stuinfo>
 <stuinfo>
  <stuName>马英</stuName>
  <stuSex>女  </stuSex>
  <stuAge>25</stuAge>
 </stuinfo>
 <stuinfo>
  <stuName>孙红雷</stuName>
  <stuSex>男  </stuSex>
  <stuAge>32</stuAge>
 </stuinfo>
 <stuinfo>
  <stuName>欧阳俊雄</stuName>
  <stuSex>男  </stuSex>
  <stuAge>28</stuAge>
 </stuinfo>
 <stuinfo>
  <stuName>江琳</stuName>
  <stuSex>女  </stuSex>
  <stuAge>23</stuAge>
 </stuinfo>
 <stuinfo>
  <stuName>小小</stuName>
  <stuSex>女  </stuSex>
  <stuAge>22</stuAge>
 </stuinfo>
</student>

aspx页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="获取数据库数据生成XML.aspx.cs" Inherits="Chapter1.获取数据库数据生成XML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript">
    function loadXMLDoc(dname) {
      if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
      }
      else {
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xhttp.open("GET", dname, false);
      xhttp.send("");
      return xhttp.responseXML;
    }
    function ReadXml() {
      var xmldoc = loadXMLDoc("Student.xml");
      //获得指定节点
      var divmsg = document.getElementById("xmlMsg");
      var msg = "<table border='1' id='mytable'><tr><th>姓名</th><th>性别</th><th>年龄</th><tr>";
      var nodes = xmldoc.getElementsByTagName("stuinfo");
      for (var i = 0; i < nodes.length; i++) {
        msg += "<tr>";
        msg += "<td>" + nodes[i].getElementsByTagName("stuName")[0].firstChild.nodeValue + "</td>";
        msg += "<td>" + nodes[i].getElementsByTagName("stuSex")[0].firstChild.nodeValue + "</td>";
        msg += "<td>" + nodes[i].getElementsByTagName("stuAge")[0].firstChild.nodeValue + "</td>";
        msg += "</tr>";
      }
      msg += "</table>";
      divmsg.innerHTML = msg;
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input type="button" value="JS读取XML" onclick="ReadXml()" /><br />
    <div id="xmlMsg">
    </div>
  </div>
  </form>
</body>
</html>

上面的JS操作主要就避免了使用childNodes(因为火狐中有时候会出现childNodes[0]获取到的是"\n"而不是我们想要的第一个子节点，这个自己可以去试下，反正我是遇到了这种情况),使得可以兼容IE、火狐，其他浏览器我没试。

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作XML文件技巧总结》、《JavaScript中ajax操作技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 手把手教你如何开发属于自己的一款小程序

    手把手教你如何开发属于自己的一款小程序

    相信大家都知道小程序是一种不需要下载安装即可使用的应用,下面这篇文章主要给大家介绍了关于如何开发属于自己的一款小程序的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • JS实现鼠标单击与双击事件共存

    JS实现鼠标单击与双击事件共存

    本篇文章主要是对JS实现鼠标单击与双击事件共存的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • JavaScript中style.left与offsetLeft的使用及区别详解

    JavaScript中style.left与offsetLeft的使用及区别详解

    这篇文章主要介绍了JavaScript中style.left与offsetLeft的使用及区别详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 一段利用WSH修改和查看IP配置的代码

    一段利用WSH修改和查看IP配置的代码

    建议增加查询条件，更准确地修改指定网卡。 本人是铁通的线路，这样看比较不错的wsh功能呢，喜欢vbs的朋友，可以用vbs实现，功能更强
    2008-05-05
  • js创建数组的简单方法

    js创建数组的简单方法

    下面小编就为大家带来一篇JS创建数组的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 通过js判断访客显示器屏幕分辨率并给出提示

    通过js判断访客显示器屏幕分辨率并给出提示

    这段代码大意是通过比较图片分辨率和桌面分辨率来判定改图是否适合直接用作访客的桌面壁纸
    2013-07-07
  • Mvc提交表单的四种方法全程详解

    Mvc提交表单的四种方法全程详解

    本文给大家介绍mvc提交表单的四种方法，分别是MVC HtmlHelper方法，传统Form表单Aciton属性提交，Jquery+Ajax 提交表单，MVC Controller控制器和表单参数传递，介绍的非常详细，需要的朋友参考下
    2016-08-08
  • 1秒50万字!js实现关键词匹配

    1秒50万字!js实现关键词匹配

    1秒50万字!js实现关键词匹配，快速进行关键字匹配，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Javascript模拟scroll滚动效果脚本

    Javascript模拟scroll滚动效果脚本

    项目需要写了一段模拟Scroll滚动代码，分享的同时，我有些疑问，希望大家能帮忙解决，代码如下
    2008-09-09
  • JavaScript学习笔记(三)：JavaScript也有入口Main函数

    JavaScript学习笔记(三)：JavaScript也有入口Main函数

    大家都知道在c和java中，有main函数货main方法作为一个程序的入口函数或方法。在JS中从js源文件的头部开始运行的，我们仍然可以虚构出一个main函数来作为程序的起点，这样一来不仅可以跟其他语言统一了，而且说不定你会对JS有更深的理解。感兴趣的小伙跟着小编一起学习吧
    2015-09-09

最新评论