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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
Bootstrap精简教程
Nov 27 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
vue 解决computed修改data数据的问题
Nov 06 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
PHP函数学习之PHP函数点评
2012/07/05 PHP
PHP对象相关知识总结
2017/04/09 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python中的自省(反射)详解
2015/06/02 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python连接phoenix的方法示例
2017/09/29 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python模块常用用法实例详解
2019/10/17 Python
python生成任意频率正弦波方式
2020/02/25 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
详解python polyscope库的安装和例程
2020/11/13 Python
文案策划求职信
2014/03/18 职场文书
小学安全汇报材料
2014/08/14 职场文书
公司聚餐通知
2015/04/22 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle