jquery生成类似word表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Table Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<div id="table-container"></div>

<script>
$(document).ready(function() {
    var data = [
        { name: "Alice", age: 25, city: "New York" },
        { name: "Bob", age: 30, city: "Los Angeles" },
        { name: "Charlie", age: 35, city: "Chicago" }
    ];

    var table = $("<table></table>");
    var header = $("<tr></tr>");
    $.each(data[0], function(key, value) {
        header.append($("<th></th>").text(key));
    });
    table.append(header);

    $.each(data, function(index, row) {
        var tr = $("<tr></tr>");
        $.each(row, function(key, value) {
            tr.append($("<td></td>").text(value));
        });
        table.append(tr);
    });

    $("#table-container").append(table);
});
</script>

</body>
</html>