js读取xml文件，动态加载成表格

来源：互联网发布：java undefined 判断编辑：程序博客网时间：2024/05/18 00:04

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="web_js_xml2.aspx.cs" Inherits="js_xml.web_js_xml2" %>

<!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 id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        loadXML = function (xmlFile) {
            var xmlDoc;
            if (window.ActiveXObject) {
                xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
                xmlDoc.async = false;
                xmlDoc.load(xmlFile);
            }
            else if (document.implementation && document.implementation.createDocument) {
                xmlDoc = document.implementation.createDocument('', '', null);
                xmlDoc.async = false;
                xmlDoc.load(xmlFile);
            }
            else {
                return null;
            }

            return xmlDoc;
        }
        checkXMLDocObj = function (xmlFile) {
            var xmlDoc = loadXML(xmlFile);
            if (xmlDoc == null) {
                alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
                window.location.href = '/Index.aspx';
            }

            return xmlDoc;
        }
        var xmldoc = checkXMLDocObj("./xml/dogs.xml");
        function displaydogs() {
            var dogNodes = xmldoc.getElementsByTagName("dog");
            var table = document.createElement("table");
            table.setAttribute("cellPadding", 5);
            table.setAttribute("width", "100%");
            table.setAttribute("border", "1");
            var tableHeader = document.createElement("thead");
            var tableRow = document.createElement("tr");
            for (var i = 0; i < dogNodes[0].childNodes.length; i++) {
                var currentNode = dogNodes[0].childNodes[i];
                if (currentNode.nodeType == 1) {
                    var tableHeaderCell = document.createElement("th");
                    var textData = document.createTextNode(currentNode.nodeName);
                    tableHeaderCell.appendChild(textData);
                    tableRow.appendChild(tableHeaderCell);
                }
            }
            tableHeader.appendChild(tableRow);
            table.appendChild(tableHeader);
            var tablesBody = document.createElement("tbody");
            for (var i = 0; i < dogNodes.length; i++) {
                var tableRow = document.createElement("tr");
                for (var j = 0; j < dogNodes[i].childNodes.length; j++) {
                    var currentNode = dogNodes[i].childNodes[j];
                    if (currentNode.nodeType == 1) {
                        var tableDataCell = document.createElement("td");
                        var textData = document.createTextNode(currentNode.firstChild.nodeValue);
                        tableDataCell.appendChild(textData);
                        tableRow.appendChild(tableDataCell);
                    }
                }
                tablesBody.appendChild(tableRow);
            }
            table.appendChild(tablesBody);
            document.body.appendChild(table);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a href="javascript:displaydogs()">show dogs</a>
    </div>
    </form>
</body>
</html>

xml内容：

<?xml version="1.0" encoding="utf-8" ?>
<Dogs>
    <dog>
        <name>Morgan</name>
        <breed>Labrador Retriver</breed>
        <age>3 years</age>
        <fullBlood>yes</fullBlood>
        <color>yellow</color>
    </dog>
    <dog>
        <name>Molly</name>
        <breed>Labrador Retriver</breed>
        <age>3 years</age>
        <fullBlood>yes</fullBlood>
        <color>red</color>
    </dog>
</Dogs>