javascript - 修复ajax填充的html表中的标题

Question

我按以下方式使用 ajax 调用填充 html 表 -

$.ajax({
    type: "POST",
    url: "my_url",
    data: JSON.stringify(result),
    async: true,
    dataType: "json",
    contentType: "application/json; charset= Shift-JIS",
    success: function (response) {
        glResp = response;
        populateTable(glResp);
    },
    error: function (error) {
        console.log(error);
        //alert("Error!!");
    }
});

我用来填充表格的函数如下 -JS -

function populateTable(finalObject) {
    var obj = finalObject;

    var headers1 = ['Name', 'City', 'Job', 'Salary'];
    var table = $("<table id='my-table' />");
    var columns = headers1;
    columns.unshift('');
    var columnCount = columns.length;
    var row = $(table[0].insertRow(-1));

    for (var i = 0; i < columnCount; i++) {
        if (i == 0) {
            var headerCell = $("<th><input type='button' id='sort'></th>");
            row.append(headerCell);
        }
        else {
            var headerCell = $("<th/>");
            headerCell.html([columns[i]]);
            row.append(headerCell);
        }
    }

    $.each(obj, function (i, obj) {
        $row = '<tr><td><input type="checkbox"></td><td>' + obj.Name + '</td><td>' + obj.City + '</td><td>' + obj.Job + '</td><td>' + obj.Salary + '</td></tr>';
        table.append(row);
    });

    var dvTable = $("#dvCSV");
    dvTable.html("");
    dvTable.append(table);
}

现在我希望在滚动数据时将表标题固定在顶部。关于如何实现这一点有任何想法吗？

Answer 1

您可以使用插件来固定标题列的位置， http://mkoryak.github.io/floatThead/

希望这个链接对您有帮助。