修复了ajax填充的html表中的标题

Fix the headers in html table populated by ajax

本文关键字：html 标题 填充 ajax      更新时间：2023-09-26

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

现在我想要表标题固定在顶部时，数据正在滚动。有什么想法，这可以实现吗?

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

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

对于固定标题，您可以为标题元素添加thead (th)，为chlid tr元素添加tbody，为两者添加display:block，为tbody元素添加overflow:auto。

var tab  = '[{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"},{"Name":"check","City":"check","job":"check","Salary":"check"}]'
tab = JSON.parse(tab);
populateTable(tab);
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 th = ""
    
    for (var i = 0; i < columnCount; i++) {
        if (i == 0) {
            var headerCell = "<th><input type='button' id='sort'></th>";
            th = th + headerCell;
        }
        else {
            var headerCell = "<th>"+[columns[i]]+"</th>";
           // headerCell.html();
            th = th + headerCell;
        }
    }
  
    table.prepend("<thead>"+th+"</thead>")
    
    $.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);
}
table{
  width:100%;
  }
td, th {
  min-width: 100px;
}
tbody{
  overflow: auto; 
  display: block; 
  height: 100px;
}
thead{
  display:block;
  text-align:left;
  background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvCSV"><div>

相关文章：