将XML数据转换为HTML数据-解网

问：

这是 XML 数据

<xml>
  <0>
    <id>e1</id>
    <Product name>vivo Y11s 4G Smartphone, 32GB, 6.51 HD Display Phantom Black</Product name>
    <Price>197</Price>
    <Wireless carrier>Unlocked for All Carriers</Wireless carrier>
    <Brand>VIVO</Brand>
    <Color>Black</Color>
    <Memory>3 GB</Memory>
    <Screen size>6.51 Inches</Screen size>
    <Operating system/>
  </0>
  <1>
    <id>e3</id>
    <Product name>Nokia 2720 Flip 4G Official Australian Version 2019 Unlocked Basic Mobile Phone with Social Apps, Emergency Button, 28 Days Battery Standby and Google Assistant, Ocean Black, 2.8 inches</Product name>
    <Price>114</Price>
    <Wireless carrier>Unlocked for All Carriers</Wireless carrier>
    <Brand>Nokia</Brand>
    <Color>Ocean Black</Color>
    <Memory>4 GB</Memory>
    <Screen size/>
    <Operating system>KaiOS</Operating system>
  </1>
</xml>

JavaScript的：

$("#electronic1Book").click(function(){
    $.ajax({
        type: "GET",
        url:"./API/electronic1API.php?range=0-200&search=",
        success: function(xml) {

            $tableData = "<tr>";
            $(xml).find("0,1,2,3").each(function() {
                console.log(xml);
                var id = $(this).find("id").text();
                var ProductName = $(this).find("Product name").text();
                var Price = $(this).find("Price").text();
                var WirelessCarrier = $(this).find("Wireless carrier").text();
                var Brand = $(this).find("Brand").text();
                var Color = $(this).find("Color").text();
                var Memory = $(this).find("Memory").text();
                var ScreenSize = $(this).find("Screen size").text();
                var OperatingSystem = $(this).find("Operating system").text();
                $tableData += "<tr><td>" + id + "</td>";
                $tableData += "<td>" + ProductName + "</td>";
                $tableData += "<td>" + Price + "</td>";
                $tableData += "<td>" + WirelessCarrier + "</td>";
                $tableData += "<td>" + Brand + "</td>";
                $tableData += "<td>" + Color + "</td>";
                $tableData += "<td>" + Memory + "</td>";
                $tableData += "<td>" + ScreenSize + "</td>";
                $tableData += "<td>" + OperatingSystem + "</td></tr>";
                console.log($tableData);
            });
            $("#electronic1-table").append($tableData);
        }
        });

    })

我试图将上面的XML代码转换为HTML表格，但代码不起作用

jQuery ajax XML

// parse the XML string
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");

// get the root element of the XML document
var root = xmlDoc.documentElement;

// create the HTML table
var table = document.createElement("table");

// go over each child node of the root element
for (var i = 0; i < root.childNodes.length; i++) {
    var child = root.childNodes[i];

    // check if the child node is an element
    if (child.nodeType === 1) {
        // create a new row for the table
        var row = document.createElement("tr");

        // go over each child element of the child node
        for (var j = 0; j < child.childNodes.length; j++) {
            var grandChild = child.childNodes[j];

            // check if the grandchild node is an element
            if (grandChild.nodeType === 1) {
                // create a new cell for the row
                var cell = document.createElement("td");

                // set the cell's text to the grandchild's text content
                cell.innerHTML = grandChild.textContent;

                // append the cell to the row
                row.appendChild(cell);
            }
        }

        // append the row to the table
        table.appendChild(row);
    }
}
You can then append the table to a desired HTML element by using .appendChild(table)

Please note that this code snippet is a basic example, and you may need to modify it to fit your specific use case.

上一个：用于筛选出具有特定属性值的 XML 节点的 SQL 查询

下一个：带有 Bootstrap 嵌套折叠的 XML 编辑器

将XML数据转换为HTML数据

Convert XML data to HTML Data

评论