使用 JavaScript 读取 XML 文件并将详细信息打印为表格数据

简介：使用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

    
        Jitendra
        Kumar
        
        Materials
        327
        19
    
    
        Amit
        Kumar
        
        Accts Payable
        326
        14
    
    
        Akash
        Kumar
        
        Materials
        327
        21
    
    
        Aishwarya
        Kulshrestha
        
        Materials
        327
        22
    
    
        Sachin
        Kumar
        
        Materials
        327
        24
    
    
        Vikash
        kumar
        
        Management
        216
        26
    
    
        Suvam
        Basak
        
        Accts Payable
        326
        30
    
    
        Abhinav
        kumar
        
        Management
        216
        32
    
     
        DhanPal
        Singh
        
        Materials
        327
        21
    
  

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

索引.html

  

    Reads the XML data using JavaScript
  
    
    
        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;
        }
    
  
    
    
        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;
        }
    

  

    
        
            Get Employees Details
        
    
      
    
    

  

运行应用程序的步骤：要读取 XML 数据，我们需要在本地服务器上运行此代码 所以，首先我们启动本地服务器，并在它打开 chrome 浏览器后，启动本地主机并查看结果。 单击获取员工详细信息按钮后，我们将以表格形式获取员工详细信息。

输出：