この記事では、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プログラミングに役立つことを願っています。