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


Posted in Javascript onJune 02, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
IE与FireFox中的childNodes区别
Oct 20 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
js常用DOM方法详解
Feb 04 Javascript
video.js使用改变ui过程
Mar 05 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
jquery.validate使用详解
Jun 02 #Javascript
jQuery ajax应用总结
Jun 02 #Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 #Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 #Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 #Javascript
Javascript小技能总结(推荐)
Jun 02 #Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 #Javascript
You might like
cache_lite试用
2007/02/14 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
js console.log打印对像与数组用法详解
2016/01/21 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
详解微信小程序调用支付接口支付
2019/04/28 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python自动登录126邮箱的方法
2015/07/10 Python
python多线程之事件Event的使用详解
2018/04/27 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Django中ORM的基本使用教程
2020/12/22 Python
Python之多进程与多线程的使用
2021/02/23 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
生物科学专业个人求职信范文
2013/12/05 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
安装工程师岗位职责
2015/02/13 职场文书
大班下学期个人总结
2015/02/13 职场文书
春季运动会加油词
2015/07/18 职场文书
公司老总年会致辞
2015/07/30 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
用Python可视化新冠疫情数据
2022/01/18 Python