Jquery 动态生成表格示例代码



$(document).ready(function() {
    // 假设这是我们要动态插入表格的数据
    var data = [
        { id: 1, name: "Alice", age: 25 },
        { id: 2, name: "Bob", age: 30 },
        { id: 3, name: "Charlie", age: 35 }
    ];

    // 动态创建表格并添加到body中
    var table = $("<table border='1'></table>");
    var thead = $("<thead><tr><th>ID</th><th>Name</th><th>Age</th></tr></thead>");
    table.append(thead);

    $.each(data, function(index, item) {
        var tr = $("<tr></tr>");
        tr.append($("<td>" + item.id + "</td>"));
        tr.append($("<td>" + item.name + "</td>"));
        tr.append($("<td>" + item.age + "</td>"));
        table.append(tr);
    });

    $("body").append(table);
});

这段jQuery代码演示了如何在页面加载完成后动态地生成一个表格,并将一些数据填充到表格中。首先,我们定义了一个包含数据的数组`data`。然后,我们创建了一个表格的HTML元素,并为其添加了表头和表体(通过遍历`data`数组动态生成每一行)。最后,我们将这个表格元素添加到`body`中。