读取XML文件，并使用JavaScript将详细信息以表格形式打印出来

介绍: 使用JavaScript读取XML文件，并以表格形式打印XML文件的详细信息。我们需要创建一个XML文件，其中包含要打印的数据。XML代表可扩展标记语言，它与HTML非常相似。XML文件的主要目的是用来存储和传输数据。创建XML文件非常简单，因为它使用自定义标签。

先决条件:

基本知识 HTML
基本知识 CSS
基本知识 JavaScript
基本知识 XML

方法: 创建XML文件后，我们将编写JavaScript代码来以表格形式从文件中读取和提取数据。因此，我们将发送XMLHttpRequest到服务器，并通过JavaScript从XML文件中获取详细信息。如果请求完成，则响应准备就绪且状态为“OK”，因此我们可以通过使用标签名称获取XML数据。

现在我们将创建两个文件：

1.employee.xml: 存储员工详细信息的XML文件。创建XML文件时我们使用自定义标签，这里我们使用不同的自定义标签，如名字、姓氏、职位、部门等，这些标签根据标签名称存储每个员工的详细信息。

employee.xml

<?xml version="1.0" encoding="utf-8"?> 
<employees> 
    <employee id="be129"> 
        <firstname>Jitendra</firstname> 
        <lastname>Kumar</lastname> 
        <title>Engineer</title> 
        <division>Materials</division> 
        <building>327</building> 
        <room>19</room> 
    </employee> 
    <employee id="be130"> 
        <firstname>Amit</firstname> 
        <lastname>Kumar</lastname> 
        <title>Accountant</title> 
        <division>Accts Payable</division> 
        <building>326</building> 
        <room>14</room> 
    </employee> 
    <employee id="be131"> 
        <firstname>Akash</firstname> 
        <lastname>Kumar</lastname> 
        <title>Engineering Manager</title> 
        <division>Materials</division> 
        <building>327</building> 
        <room>21</room> 
    </employee> 
    <employee id="be132"> 
        <firstname>Aishwarya</firstname> 
        <lastname>Kulshrestha</lastname> 
        <title>Engineer</title> 
        <division>Materials</division> 
        <building>327</building> 
        <room>22</room> 
    </employee> 
    <employee id="be133"> 
        <firstname>Sachin</firstname> 
        <lastname>Kumar</lastname> 
        <title>Engineer</title> 
        <division>Materials</division> 
        <building>327</building> 
        <room>24</room> 
    </employee> 
    <employee id="be135"> 
        <firstname>Vikash</firstname> 
        <lastname>kumar</lastname> 
        <title>COO</title> 
        <division>Management</division> 
        <building>216</building> 
        <room>26</room> 
    </employee> 
    <employee id="be136"> 
        <firstname>Suvam</firstname> 
        <lastname>Basak</lastname> 
        <title>Accountant</title> 
        <division>Accts Payable</division> 
        <building>326</building> 
        <room>30</room> 
    </employee> 
    <employee id="be135"> 
        <firstname>Abhinav</firstname> 
        <lastname>kumar</lastname> 
        <title>COO</title> 
        <division>Management</division> 
        <building>216</building> 
        <room>32</room> 
    </employee> 
     <employee id="be131"> 
        <firstname>DhanPal</firstname> 
        <lastname>Singh</lastname> 
        <title>Engineering Manager</title> 
        <division>Materials</division> 
        <building>327</building> 
        <room>21</room> 
    </employee> 
  
</employees>

2.index.html： 此文件包含HTML、CSS和JavaScript代码。我们使用style标签来设置CSS部分，其中我们为表格属性和按钮设置样式，然后使用script标签来编写JavaScript代码并插入employee.xml文件。在loadXMLDoc()函数中，当请求完成后，我们向服务器发送HTTP请求，然后从服务器获取响应并从XML文件中访问数据。在empDetails()函数中，如果我们从服务器获取到响应，则通过使用自定义标签名逐个获取XML文件的数据。要显示此xml文件的数据，只需单击”获取员工详情”按钮，xml文件的数据将以表格形式显示在屏幕上。

index.html

<!DOCTYPE html> 
  
<head> 
    <title>Reads the XML data using JavaScript</title> 
  
    <!-- CSS -->
    <style> 
        table { 
            border-collapse: collapse; 
            width: 100%; 
        } 
  
        th, 
        td { 
            text-align: left; 
            padding: 8px; 
        } 
  
        tr:nth-child(even) { 
            background-color: #7ce2af 
        } 
  
        th { 
            background-color: #7c0f65; 
            color: white; 
        } 
  
        .button { 
            position: relative; 
            text-align: center; 
            padding: 20px; 
            border: 4px solid rgb(55, 12, 211); 
            background: rgba(20, 192, 4, 0.5); 
            color: rgb(230, 36, 78); 
            outline: none; 
            border-radius: 30px; 
            font-size: 30px; 
            width: 500px; 
  
        } 
  
        .button:hover { 
            color: black; 
            background: white; 
        } 
    </style> 
  
    <!--JavaScript-->
    <script> 
        function loadXMLDoc() { 
            var xmlhttp = new XMLHttpRequest(); 
            xmlhttp.onreadystatechange = function () { 
  
                // Request finished and response  
                // is ready and Status is "OK" 
                if (this.readyState == 4 && this.status == 200) { 
                    empDetails(this); 
                } 
            }; 
  
            // employee.xml is the external xml file 
            xmlhttp.open("GET", "employee.xml", true); 
            xmlhttp.send(); 
        } 
  
        function empDetails(xml) { 
            var i; 
            var xmlDoc = xml.responseXML; 
            var table = 
                `<tr><th>Firstname</th><th>Lastname</th> 
                    <th>Title</th><th>Division</th> 
                    <th>Building</th><th>Room</th> 
                </tr>`; 
            var x = xmlDoc.getElementsByTagName("employee"); 
  
            // Start to fetch the data by using TagName  
            for (i = 0; i < x.length; i++) { 
                table += "<tr><td>" + 
                    x[i].getElementsByTagName("firstname")[0] 
                    .childNodes[0].nodeValue + "</td><td>" + 
                    x[i].getElementsByTagName("lastname")[0] 
                    .childNodes[0].nodeValue + "</td><td>" + 
                    x[i].getElementsByTagName("title")[0] 
                    .childNodes[0].nodeValue + "</td><td>" + 
                    x[i].getElementsByTagName("division")[0] 
                    .childNodes[0].nodeValue + "</td><td>" + 
                    x[i].getElementsByTagName("building")[0] 
                    .childNodes[0].nodeValue + "</td><td>" + 
                    x[i].getElementsByTagName("room")[0] 
                    .childNodes[0].nodeValue + "</td></tr>"; 
            } 
  
            // Print the xml data in table form 
            document.getElementById("id").innerHTML = table; 
        } 
    </script> 
</head> 
  
<body> 
    <center> 
        <button type="button" class="button" 
            onclick="loadXMLDoc()"> 
            Get Employees Details 
        </button> 
    </center> 
      
    <br><br> 
    <table id="id"></table> 
</body> 
  
</html>