欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS讀取XML文件數(shù)據(jù)并以table形式顯示數(shù)據(jù)的方法(兼容IE與火狐)

 更新時(shí)間:2016年06月02日 12:01:44   作者:aparche  
這篇文章主要介紹了JS讀取XML文件數(shù)據(jù)并以table形式顯示數(shù)據(jù)的方法,涉及javascript針對xml節(jié)點(diǎn)操作及HTML表格操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS讀取XML文件數(shù)據(jù)并以table形式顯示數(shù)據(jù)的方法。分享給大家供大家參考,具體如下:

先看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="獲取數(shù)據(jù)庫數(shù)據(jù)生成XML.aspx.cs" Inherits="Chapter1.獲取數(shù)據(jù)庫數(shù)據(jù)生成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");
      //獲得指定節(jié)點(diǎn)
      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(因?yàn)榛鸷杏袝r(shí)候會(huì)出現(xiàn)childNodes[0]獲取到的是"\n"而不是我們想要的第一個(gè)子節(jié)點(diǎn),這個(gè)自己可以去試下,反正我是遇到了這種情況),使得可以兼容IE、火狐,其他瀏覽器我沒試。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript操作XML文件技巧總結(jié)》、《JavaScript中ajax操作技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 編寫高質(zhì)量JavaScript代碼的基本要點(diǎn)

    編寫高質(zhì)量JavaScript代碼的基本要點(diǎn)

    編寫高質(zhì)量JavaScript代碼的基本要點(diǎn)分享給大家,感興趣的小伙伴們可以參考一下
    2016-03-03
  • javaScript刪除對象屬性的幾種方法總結(jié)

    javaScript刪除對象屬性的幾種方法總結(jié)

    這篇文章主要給大家介紹了關(guān)于javaScript刪除對象屬性的幾種方法的相關(guān)資料,它們在不同場景下有不同的應(yīng)用,需要根據(jù)實(shí)際情況選擇最合適的刪除方法,文中通過實(shí)例代碼介紹的非常詳細(xì),下面需要的朋友可以參考下
    2023-06-06
  • popdiv

    popdiv

    popdiv...
    2006-07-07
  • JavaScript數(shù)據(jù)類型轉(zhuǎn)換簡單方法舉例

    JavaScript數(shù)據(jù)類型轉(zhuǎn)換簡單方法舉例

    JavaScript是一種無類型語言,但同時(shí)JavaScript提供了一種靈活的自動(dòng)類型轉(zhuǎn)換的處理方式,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下
    2023-12-12
  • JS常用跨域方法實(shí)現(xiàn)原理解析

    JS常用跨域方法實(shí)現(xiàn)原理解析

    這篇文章主要介紹了JS常用跨域方法實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-12-12
  • 基于JavaScript的簡易計(jì)算器功能

    基于JavaScript的簡易計(jì)算器功能

    這篇文章主要為大家詳細(xì)介紹了基于JavaScript的簡易計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • JavaScript類型相關(guān)的常用操作總結(jié)

    JavaScript類型相關(guān)的常用操作總結(jié)

    這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript類型相關(guān)的常用操作,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-02-02
  • JS+Canvas實(shí)現(xiàn)的俄羅斯方塊游戲完整實(shí)例

    JS+Canvas實(shí)現(xiàn)的俄羅斯方塊游戲完整實(shí)例

    這篇文章主要介紹了JS+Canvas實(shí)現(xiàn)的俄羅斯方塊游戲,結(jié)合完整實(shí)例形式分析了Canvas技術(shù)實(shí)現(xiàn)俄羅斯方塊游戲的步驟、技術(shù)難點(diǎn)與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2016-12-12
  • 全面解析Bootstrap排版使用方法(文字樣式)

    全面解析Bootstrap排版使用方法(文字樣式)

    這篇文章全面解析了Bootstrap排版使用方法,本文重點(diǎn)介紹Bootstrap排版中的文字樣式設(shè)置,感興趣的小伙伴們可以參考一下
    2015-11-11
  • Jsonp 跨域的原理以及Jquery的解決方案

    Jsonp 跨域的原理以及Jquery的解決方案

    JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允許請求當(dāng)前源(域名、協(xié)議、端口)的資源。
    2010-05-05

最新評(píng)論