冻结 HTML 表格的多行和多列-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

489336

文章

250677152

访问

+关注

分类

暂无分类

日期归档

暂无数据

冻结 HTML 表格的多行和多列

发布于2021-12-10 08:07 阅读(1675) 评论(0) 点赞(11) 收藏(0)

我有一个由后端 (C#) 生成的 HTML 表。我想修复标题（2 行具有销售类型和位置）和前两列（产品名称和描述）。

我的表如下所示：

标题行的行跨度为 2，前两列（描述下）也需要冻结。

我尝试了以下代码：

<script>
$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
    /*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain             it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
      $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
      $('.firstrow').css("left", $("tbody").scrollLeft());

  });
});

    </script>
 <table id="ContentPlaceHolder1_tbl_Currentday" class="table table-responsive ReportTbl  table-bordered">
    <tr class="firstrow">
        <th colspan="2" rowspan="2">Description</th><th colspan="12">Daily Sales</th><th colspan="11">MONTH TO DATE SALES</th><th colspan="3">FORECAST</th><th colspan="12">AVAILABLE STOCK</th><th colspan="10">IN TRANSIT QUANTITY</th>
    </tr>
        <tr class="firstrow">
        <th>PROD QTY</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>MTD</th><th>TOTAL</th><th class="totaltd">ACH%</th><th>FAC</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th>
    </tr><tr>
        <td rowspan="3" style="font-weight:bold;">          AAMRUS</td><td>  AAMRUS CANDY - (BAG) - (35X60) - (670)</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td class="totaltd">0</td><td>3,572</td><td>202</td><td>926</td><td>36</td><td>414</td><td>1,417</td><td>562</td><td>0</td><td>1,310</td><td>0</td><td class="totaltd">8,439</td><td>9,065</td><td>16,997</td><td class="totaltd">93.09%</td><td>2,426</td><td>432</td><td>531</td><td>0</td><td>167</td><td>651</td><td>327</td><td>243</td><td>4</td><td>0</td><td>36</td><td class="totaltd">2,391</td><td>0</td><td>0</td><td>0</td><td>0</td><td>152</td><td>304</td><td>0</td><td>228</td><td>0</td><td class="totaltd">684</td>
    </tr><tr>
        <td>  AAMRUS CANDY - (BOX) - (70X30) - (1032)</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td class="totaltd">0</td><td>1,126</td><td>1,462</td><td>1,270</td><td>333</td><td>737</td><td>1,576</td><td>813</td><td>575</td><td>218</td><td>60</td><td class="totaltd">8,170</td><td>9,068</td><td>17,003</td><td class="totaltd">90.1%</td><td>4,872</td><td>723</td><td>590</td><td>964</td><td>522</td><td>613</td><td>597</td><td>634</td><td>441</td><td>646</td><td>74</td><td class="totaltd">5,804</td><td>0</td><td>441</td><td>252</td><td>252</td><td>315</td><td>126</td><td>252</td><td>0</td><td>0</td><td class="totaltd">1,638</td>
    </tr><tr class="totaltd">
        <td>Total</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>4,698</td><td>1,664</td><td>2,196</td><td>369</td><td>1,151</td><td>2,993</td><td>1,375</td><td>575</td><td>1,528</td><td>60</td><td>16,609</td><td>18,133</td><td>34,000</td><td>91.6%</td><td>7,298</td><td>1,155</td><td>1,121</td><td>964</td><td>689</td><td>1,264</td><td>924</td><td>877</td><td>445</td><td>646</td><td>110</td><td>8,195</td><td>0</td><td>441</td><td>252</td><td>252</td><td>467</td><td>430</td><td>252</td><td>228</td><td>0</td><td>2,322</td>
    </tr>
</table>

它只冻结了第一列，NOR 前两列，NOR 前两行。

我怎样才能做到这一点请帮助谢谢

解决方案

目标输出

冻结多行多列的电子表格示例

箱体结构

制作一个<div>将成为可滚动组件的容器。确保<div>容器有固定的width和height，并且应该小于实际内容。
让B, C, 和D成为冻结的行和列。
让A成为实际的表格内容。
制作组件A, B, C, 和D使用<table>标签。

HTML

<div id="container">
    <table id="a">
        <thead>
            <tr>
                <th>A1</th>
                <th>A2</th>
                <th>A3</th>
                <th>A4</th>
            </tr>
            <tr>
                <th>B1</th>
                <th>B2</th>
                <th>B3</th>
                <th>B4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>C1</td>
                <td>C2</td>
                <td>C3</td>
                <td>C4</td>
            </tr>
            <tr>
                <td>D1</td>
                <td>D2</td>
                <td>D3</td>
                <td>D4</td>
            </tr>
        </tbody>
    </table>
    <table id="b">
        <thead>
            <tr>
                <th>A1</th>
                <th>A2</th>
                <th>A3</th>
                <th>A4</th>
            </tr>
            <tr>
                <th>B1</th>
                <th>B2</th>
                <th>B3</th>
                <th>B4</th>
            </tr>
        </thead>
    </table>
    <table id="c">
        <thead>
            <tr>
                <th>A1</th>
                <th>A2</th>
            </tr>
            <tr>
                <th>B1</th>
                <th>B2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>C1</td>
                <td>C2</td>
            </tr>
            <tr>
                <td>D1</td>
                <td>D2</td>
            </tr>
        </tbody>
    </table>
    <table id="d">
        <thead>
            <tr>
                <th>A1</th>
                <th>A2</th>
            </tr>
            <tr>
                <th>B1</th>
                <th>B2</th>
            </tr>
        </thead>
    </table>
</div>

CSS

#container{
    width:90px;
    max-height:90px;
    overflow: auto;
    position: relative;
}
#a{
    position: relative;
    z-index: 1
}
#b{
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2
}
#c{
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2
}
#d{
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3  
}

JavaScript / jQuery

$('#container').scroll(function(event) {
    var scrolledX = $(this).scrollLeft();
    var scrolledY = $(this).scrollTop();
    $(this).find('#c').css('left',scrolledX+'px');
    $(this).find('#b').css('top',scrolledY+'px');
    $(this).find('#d').css('left',scrolledX+'px');
    $(this).find('#d').css('top',scrolledY+'px');
});