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

Question

我正在尝试修复标题和列，并使用 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;}

我得到的输出：

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

Answer 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>