jQuery根据数据动态创建表格：列固定，行超出滚动条，绑定td点击事件等

$(document).ready(function() {
    var data = [
        { "name": "Alice", "age": 25, "email": "alice@example.com" },
        // ... 更多数据
    ];
 
    var table = $('<table>').addClass('table table-hover table-bordered table-condensed');
    var thead = $('<thead>');
    var tbody = $('<tbody>');
 
    // 创建表头
    var headerRow = $('<tr>');
    headerRow.append($('<th>').text('Name'));
    headerRow.append($('<th>').text('Age'));
    headerRow.append($('<th>').text('Email'));
    thead.append(headerRow);
 
    // 创建表体
    for (var i = 0; i < data.length; i++) {
        var row = $('<tr>');
        row.append($('<td>').text(data[i].name));
        row.append($('<td>').text(data[i].age));
        row.append($('<td>').text(data[i].email));
        tbody.append(row);
    }
 
    // 绑定点击事件
    tbody.on('click', 'td', function() {
        var index = $(this).parent().children().index($(this));
        alert('Clicked on column index ' + index);
    });
 
    table.append(thead);
    table.append(tbody);
 
    $('#table-container').append(table);
});

这段代码首先定义了一个数据数组，然后使用jQuery创建了一个带有固定列的表格。对于数据数组中的每个对象，它将创建一个表行并将数据填充到相应的单元格中。最后，它将表格添加到页面的某个容器中，并为单元格的点击事件绑定了一个处理函数，该函数将弹出一个警告框，显示被点击的列的索引。