Javascript 修复由ajax填充的html表中的标题

我使用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);
}

函数populateTable（finalObject）{
var obj=最终对象；
var headers1=[‘姓名’、‘城市’、‘工作’、‘薪水’]；
变量表=$（“”）；
变量列=标题1；
列。取消移位（“”）；
var columnCount=columns.length；
变量行=$（表[0]。插入行（-1））；
对于（变量i=0；i

---

现在，我希望在滚动数据时将表头固定在顶部。你知道如何实现吗？

你可以使用一个插件来固定标题栏的位置，

---

希望这个链接能帮助你

您可以使用插件来固定标题列的位置，

---

希望这个链接能帮助你

对于固定标题，您可以为title元素（

th

）添加

thead

，为chlid

tr

元素添加tbody，为两者添加

display:block

，为tbody元素添加

overflow:auto

var tab='[{“名称”：“检查”、“城市”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“名称”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“名称”：“检查”、“城市”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“名称”：“检查”、“城市”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“名称”：“检查”、“城市”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“姓名”：“检查”，“城市”：“支票”，“工作”：“支票”，“工资”：“支票”}
tab=JSON.parse（tab）；
可填充（选项卡）；
函数populateTable（finalObject）{
var obj=最终对象；
var headers1=[‘姓名’、‘城市’、‘工作’、‘薪水’]；
变量表=$（“”）；
变量列=标题1；
列。取消移位（“”）；
var columnCount=columns.length；
var th=“”
对于（变量i=0；i

表格{
宽度：100%；
}
td，th{
最小宽度：100px；
}
t车身{
溢出：自动；
显示：块；
高度：100px；
}
泰德{
显示：块；
文本对齐：左对齐；
背景：绿色；
}

---

对于固定标题，您可以为title元素（

th

）添加

thead

，为chlid

tr

元素添加tbody，同时为两者添加

显示：block

，为tbody元素添加

溢出：auto

var tab='[{“名称”：“检查”、“城市”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“名称”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“名称”：“检查”、“城市”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“名称”：“检查”、“城市”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“名称”：“检查”、“城市”：“检查”、“工作”：“检查”、“工资”：“检查”}，{“姓名”：“检查”，“城市”：“支票”，“工作”：“支票”，“工资”：“支票”}
tab=JSON.parse（tab）；
可填充（选项卡）；
函数populateTable（finalObject）{
var obj=最终对象；
var headers1=[‘姓名’、‘城市’、‘工作’、‘薪水’]；
变量表=$（“”）；
变量列=标题1；
列。取消移位（“”）；
var columnCount=columns.length；
var th=“”
对于（变量i=0；i

表格{
宽度：100%；
}
td，th{
最小宽度：100px；
}
t车身{
溢出：自动；
显示：块；
高度：100px；
}
泰德{
显示：块；
文本对齐：左对齐；
背景：绿色；
}

Hey@Frank对不起，我不能早些回复，你的解决方案很完美，对我很有效。我面临的一个问题是，如果我使用空白：no_wrap，那么解决方案就不起作用了。我使用不换行符是因为我有很多非英语文本（中文、日语）要显示。你知道怎么解决吗？事实上，两者都是。嘿@Frank对不起，我不能早些回复，你的解决方案很完美，对我很有效。我面临的一个问题是，如果我使用空白：no_wrap，那么解决方案就不起作用了。我使用不换行符是因为我有很多非英语文本（中文、日语）要显示。你知道怎么解决吗？事实上，两者都是。