如何使用 Jquery 冻结 HTML 表格的标题和列

Posted 2023-05-08

【中文标题】如何使用 Jquery 冻结 HTML 表格的标题和列

【英文标题】：How to freeze a Header and Columns of a HTML table using Jquery

【发布时间】：2019-12-09 20:51:32

【问题描述】：

我正在尝试修复标题和列，并使用 Jquery 更改它们的表格背景颜色。我已经从一些 Json 数据在 jquery 中创建了表。

我已经尝试过'translate()' 函数来冻结。

var translate = "translate(5px,0)";

“这可以帮助我修复列或标题，但主要问题是，当我先水平滚动然后垂直滚动时，标题的第一个 <th/> 会滚动而其余标题保持固定。（请参阅输出图像作为提及问题）”

让我给你看代码：

HTML：

这是我的 html，我从 <script/> 调用“MyJS”。

 <div class="row" >
    <div class="tblMain" id="tblMainDiv">

    </div>
</div>

<script>
  $("#tblMainDiv").MyJS(
                    Data: data.Data,
                    ColoredColumns:["Sarika"]
  );                                                            
<script/>

JS：

'_params'是参数，'_params.Data'是表的Json数据。 '_myTableTr' 是表的 tr。

   var _collection = JSON.parse(_params.Data);
   var _myTableColumns = [];

   var _collection = JSON.parse(_params.Data); // Parsing the Json Data.
        for (var i in _collection[0]) 
            _myTableColumns.push(i); // grabing column headers and pushing into collection.
        


        // Adding table heads
        if (_myTableColumns.length > 0)   
            for (var i = 0; i < _myTableColumns.length; i++) 
                var _myTableTh = document.createElement("th");
                _myTableTh.innerHTML = _myTableColumns[i];
                _headerTr.appendChild(_myTableTh);
            
        

        // adding table data.
        for (var i = 0; i < _collection.length; i++) 
            _myTableTr = _myDatatable.insertRow(-1);
            for (var j = 0; j < _myTableColumns.length; j++) 
                var cell = _myTableTr.insertCell(-1);
                cell.innerHTML = _collection[i][_myTableColumns[j]];
            
        

这是冻结的代码：

这里我试图只修复一个第一列，但将来我想修复多个随机列。

 //For Header and Specific columns to be fixed .
    var lastPosY = 0;
    var lastPosX = 0;

    $("#"+$(this).attr('id')).scroll(function () 
        var currPosX = this.scrollLeft; // get current position of Column.
        var currPosY = this.scrollTop;

        if (lastPosY != currPosY && (lastPosY > 0 || currPosY>0)) 

            $('#tblMyDataTable' + $(this).attr('id') + ' thead  th:first-child').removeAttr('style');
            var translate = "translate(0," + (this.scrollTop) + "px)"; // getting translate pixels on the basis of current position of Header bar.
            $($('#tblMyDataTable' + $(this).attr('id')).find("thead").eq(0)).css('transform', translate);

        
        else 

            translate = "translate(" + (this.scrollLeft) + "px,0)";  // getting translate pixels on the basis of current position of Column.
            if (lastPosX != currPosX) 
                $('#tblMyDataTable' + $(this).attr('id') + ' thead  th:first-child').css('transform', translate);
                $('#tblMyDataTable' + $(this).attr('id') + ' tbody tr td:first-child').css('transform', translate); 
            
        

        lastPosX = currPosX;
        lastPosY = currPosY;

    );

CSS：

.myDataTable 
width: 100%;
overflow-x: scroll;
border-collapse: separate !important;
border: 1px solid #000;

.tblMain 
margin:20px;

.myDataTable > tbody > tr:nth-child(even)>td 
background-color: #e6e6e6;

.myDataTable > tbody > tr:nth-child(odd) > td 
background-color: #fff;

.tblMain 
    height: 50vh;
    overflow-y: auto;

我得到的输出：

请帮我修复它并更改已修复的背景颜色。 谢谢。

【参考方案1】：

为此，您可以使用两个表。一个用于表头，另一个用于表数据。然后使用 resize 事件来调整列宽。

<table id="header">
   <thead><tr>
     <th>Col1</th>
     <th>Col2</th>      
   </tr></thead>
</table>
<table id="body">
   <tbody><tr>
     <td>Data1</td>
     <td>Data2</td>      
   </tr></tbody>
</table>

jQuery datatables plugin has this functionality.

<style>

   thead tr 
       background-color: red; /* Your color */
   

</style>

【讨论】：

感谢您的回复。如何为固定列赋予背景颜色，如何使用两个<table/> 实现可编辑单元格功能和过滤功能？

可编辑单元格功能是一种复杂的行为，您需要在

中动态创建文本框。最好使用具有该功能的插件。 Datatables 具有此功能，但您需要将其作为付费插件添加。虽然您可以使用试用版。更好的选择是js-grid.com/demos。

您可以使用 css 为 thead tr 选择器提供背景颜色。

我正在使用两个不同的<table/> 再次面临同样的问题。

两个表的用途是用顶表和内容底表来固定表头。使用这种方法您是否仍然面临同样的问题？