如何将动态结构化的 XML 转换为 table?

How to convert an dynamically structured XML to a table?

如果您将 XML 链接加载到 https://www.convertcsv.com/xml-to-csv.htm(通过使用 输入 URL),您会立即得到一个不错的 table:

你怎么能在事先不知道XML的结构的情况下直接在PHP中做呢?

示例代码和URL:

<?php
url = 'https://uxdb.s3.amazonaws.com';
$input = new SimpleXMLElement($url, 0, TRUE);
echo '<pre>' . print_r($input, true) . '<pre>';
?>

这给你:

这是我最终的做法 - https://paiza.io/projects/-ouYa8tFfqcH8QeaVeQfIw(这个 fiddle 测试仪对输出有限制,所以我在那里使用 5 而不是 count($array)):

<?php
$url = 'https://uxdb.s3.amazonaws.com';
$input = new SimpleXMLElement($url, 0, TRUE);
$json = json_encode($input);
$array = json_decode($json,TRUE)['Contents'];

header('Content-Type: text/html; charset=utf-8');
?>
<head>
<style>
table2 {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {cursor: pointer;}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
</head>
<body>

<table id="sortable">
<?php

for ($i=0; $i<count($array); $i++) {
    if ($i==0)
        echo "<thead>\n";
    echo "<tr>\n";
    foreach ($array[$i] as $key => $value)
        echo ($i==0 ? "<th>$key &varr;</th>" : "<td>" . ($key == 'Key' ? "<a href=\"$url/$value\">$value</a>" : $value) . "</td>") . "\n";
    echo "</tr>\n";
    if ($i==0)
        echo "</thead>\n<tbody>\n";
}
?>
</tbody>
</table>

<script>document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('sortable');
    const headers = table.querySelectorAll('th');
    const tableBody = table.querySelector('tbody');
    const rows = tableBody.querySelectorAll('tr');

    // Track sort directions
    const directions = Array.from(headers).map(function(header) {
        return '';
    });

    // Transform the content of given cell in given column
    const transform = function(index, content) {
        // Get the data type of column
        const type = headers[index].getAttribute('data-type');
        switch (type) {
            case 'number':
                return parseFloat(content);
            case 'string':
            default:
                return content;
        }
    };

    const sortColumn = function(index) {
        // Get the current direction
        const direction = directions[index] || 'asc';

        // A factor based on the direction
        const multiplier = (direction === 'asc') ? 1 : -1;

        const newRows = Array.from(rows);

        newRows.sort(function(rowA, rowB) {
            const cellA = rowA.querySelectorAll('td')[index].innerHTML;
            const cellB = rowB.querySelectorAll('td')[index].innerHTML;

            const a = transform(index, cellA);
            const b = transform(index, cellB);    

            switch (true) {
                case a > b: return 1 * multiplier;
                case a < b: return -1 * multiplier;
                case a === b: return 0;
            }
        });

        // Remove old rows
        [].forEach.call(rows, function(row) {
            tableBody.removeChild(row);
        });

        // Reverse the direction
        directions[index] = direction === 'asc' ? 'desc' : 'asc';

        // Append new row
        newRows.forEach(function(newRow) {
            tableBody.appendChild(newRow);
        });
    };

    [].forEach.call(headers, function(header, index) {
        header.addEventListener('click', function() {
            sortColumn(index);
        });
    });
});</script>