This article describes how JS reads XML file data and displays data in table form. Share it for your reference, as follows:
Let's look at the xml file first:
<?xml version="1.0" standalone="yes"?> <student> <stuinfo> <stuName>Zhang Qiuli</stuName> <stuSex>female </stuSex> <stuAge>18</stuAge> </stuinfo> <stuinfo> <stuName>Li Wencai</stuName> <stuSex>male </stuSex> <stuAge>31</stuAge> </stuinfo> <stuinfo> <stuName>Li Siwen</stuName> <stuSex>male </stuSex> <stuAge>22</stuAge> </stuinfo> <stuinfo> <stuName>Ma Ying</stuName> <stuSex>female </stuSex> <stuAge>25</stuAge> </stuinfo> <stuinfo> <stuName>Sun Honglei</stuName> <stuSex>male </stuSex> <stuAge>32</stuAge> </stuinfo> <stuinfo> <stuName>Ouyang Junxiong</stuName> <stuSex>male </stuSex> <stuAge>28</stuAge> </stuinfo> <stuinfo> <stuName>Jiang Lin</stuName> <stuSex>female </stuSex> <stuAge>23</stuAge> </stuinfo> <stuinfo> <stuName>Little little</stuName> <stuSex>female </stuSex> <stuAge>22</stuAge> </stuinfo> </student>
Aspx page code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="get database data generation" Inherits="Chapter1.get database data generation XML" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function loadXMLDoc(dname) {
if () {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("");
}
("GET", dname, false);
("");
return ;
}
function ReadXml() {
var xmldoc = loadXMLDoc("");
//Get the specified node var divmsg = ("xmlMsg");
var msg = "<table border='1' id='mytable'><tr><th>Name</th><th>gender</th><th>age</th><tr>";
var nodes = ("stuinfo");
for (var i = 0; i < ; i++) {
msg += "<tr>";
msg += "<td>" + nodes[i].getElementsByTagName("stuName")[0]. + "</td>";
msg += "<td>" + nodes[i].getElementsByTagName("stuSex")[0]. + "</td>";
msg += "<td>" + nodes[i].getElementsByTagName("stuAge")[0]. + "</td>";
msg += "</tr>";
}
msg += "</table>";
= msg;
}
</script>
</head>
<body>
<form runat="server">
<div>
<input type="button" value="JS read XML" onclick="ReadXml()" /><br />
<div >
</div>
</div>
</form>
</body>
</html>
The above JS operation mainly avoids the use of childNodes (because childrenNodes[0] sometimes appear in Firefox and get "\n" instead of the first child node we want. You can try this myself, anyway, I encountered this situation), making it compatible with IE and Firefox. I haven't tried other browsers.
For more information about JavaScript, please view the special topic of this site: "Summary of JavaScript's skills in operating XML files》、《Summary of ajax operation skills in JavaScript》、《Summary of json operation skills in JavaScript》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript animation effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《Summary of JavaScript traversal algorithm and skills"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.