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 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python代码的打包与发布详解
2014/07/30 Python
python实现画圆功能
2018/01/25 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书