脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript设计模式组合设计模式案例

    JavaScript设计模式组合设计模式案例

    这篇文章主要介绍了JavaScript设计模式组合设计模式案例，组合设计模式是用于将多个部分通过组合的方式行成一个整体，更多相关内容需要的小伙伴可以参考一下
    2022-06-06
  • Javascript 中的 && 和 || 使用小结

    Javascript 中的 && 和 || 使用小结

    Javascript 中的 && 和 || ，有时候用作条件判断，非常的简洁，不熟悉的朋友可能不太了解，这里最后有个朋友补充，非常的好。
    2010-04-04
  • 原生js滑动轮播封装

    原生js滑动轮播封装

    这篇文章主要为大家详细介绍了原生js滑动轮播封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • js下为表格内部动态添加行的代码

    js下为表格内部动态添加行的代码

    最近的一个项目中在保存表单数据时，要用到一个动态添加行的功能。平时动态添加行只是在表格的最下面添加，现在在表格中间动态添加行，而且表格内部是包含并且单元格的，其实很简单，下面贴出代码。
    2010-06-06
  • javascript读取RSS数据

    javascript读取RSS数据

    javascript读取RSS数据...
    2007-01-01
  • Javascript 页面模板化很多人没有使用过的方法

    Javascript 页面模板化很多人没有使用过的方法

    今天遇到一个问题，这个问题也是我以前遇到的问题，以前的方式，也是大多数人使用的方式。大家可以看看我的文章
    2012-06-06
  • 使用javascript获取flash加载的百分比的实现代码

    使用javascript获取flash加载的百分比的实现代码

    使用javascript获取flash加载的百分比的实现代码，方便flash小游戏判断页面，提高用户体验。
    2011-05-05
  • 详解JSON.stringify()的5个秘密特性

    详解JSON.stringify()的5个秘密特性

    这篇文章主要介绍了详解JSON.stringify()的5个秘密特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 关于Javascript 对象(object)的prototype

    关于Javascript 对象(object)的prototype

    Javascript中的每个对象(object)都会有 prototype，下面为大家介绍下其具体的应用
    2014-05-05
  • 使用Echarts绘制动态排序折线图

    使用Echarts绘制动态排序折线图

    Echarts,作为一个使用广泛的JavaScript图表库,提供了创建动态排序折线图的强大功能,下面就跟随小编一起学习一下如何使用Echarts绘制动态排序折线图吧
    2023-12-12

最新评论