この記事では、JSがXMLファイルデータを読み取り、テーブル形式のデータを表示する方法について説明します。次のように、参照のために共有してください。
最初にXMLファイルを見てみましょう：
<？xml version = "1.0" standalone = "yes"？> <sudent> <Stuinfo> <Stuname> Zhang Qiuli </stuname> <stusex> </stusex> <Stuage> 18 </stuage> </stuinfo> <stuinfo> <Stusex> </stusex> </stusex> <Stusex> 31 </stuage> </stuinfo> <stuinfo> <stuname> li siwen </stuname> <stusex>男性</stusex> <stusex> 22 </stuage> </stuinfo> <stuinfo> <stuname> sun honglei </stuname> <stusex>男性</stusex> <stuage> 32 </stuage> </stuinfo> <stuinfo> <stuname> ouyang junxiong </stuname>男性</stusex> </stusex> 28 </stusex> </stuinfo> <stuinfo> <stuname> jiang lin </stuname> <stusex> </stusex> <stusex> </stusex> <stusex> 23 </stuuse> </stuinfo> <stuinfo> <stuname> xiaoxiao <Stusex>女性</stusex> <Stuage> 22 </stuage> </stuinfo> </sudine>
ASPXページコード：
<％@ページ言語= "c＃" autoeventwireup = "true" codebehind = "データベースデータを取得してxml.aspx.cs" enternits = "chapter1.get database data"％> < "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <hhtml xmlns =" http://www.w3.org/1999/xhtml " loadxmldoc（dname）{if（window.xmlhttprequest）{xhttp = new xmlhttprequest（）; } else {xhttp = new ActiveXObject（ "microsoft.xmlhttp"）; } xhttp.open（ "get"、dname、false）; xhttp.send（ ""）; xhttp.responsexmlを返します。 } function readxml（）{var xmldoc = loadxmldoc（ "student.xml"）; //指定されたノードvar divmsg = document.getElementById（ "xmlmsg"）を取得します。 var msg = "<table border = '1' id = 'myTable'> <tr> <th> name </th> <th> gender </th> <th> age </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> <入力タイプ= "button" value = "js read xml" onclick = "readxml（）"/> <br/> <div = "xmlmsg"> </div> </div>> </html> </html> </html>上記のJS操作は、主に子供のノードの使用を回避します（子供のノード[0]がFirefoxに表示され、最初の子ノードの代わりに「/n」を取得することがあります。これを自分で試すことができますが、とにかくこの状況に遭遇しました）。他のブラウザを試していません。
JavaScriptの詳細については、このサイトの特別なトピックを確認してください：「JavaScriptのXMLファイルの操作スキルの要約」、「JavaScriptのAJAX操作スキルの要約」、「JavaScriptのJSON操作スキルの要約」、JavaScriptスイッチング効果と技術の要約」、JavaScript Search Anmative Effectの概要 "" summation "" summation "" sund "テクニック、「JavaScriptエラーとデバッグテクニックの要約」、「JavaScriptデータ構造とアルゴリズム手法の概要」、「JavaScriptトラバーサルアルゴリズムとテクニックの要約」、および「JavaScript Mathematical Operations Usageの要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。