冻结多行HTML表格的多列

冻结多行HTML表格的多列

关注
发信
关注(28)粉丝(399)

冻结多行HTML表格的多列

本文介绍了冻结多行HTML表格的多列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个由后端(C#)生成的HTML表.我要修复标题(具有销售类型和位置的2行)和前两列(产品名称和说明).

I have a HTML table which is generated by back-end (C#). I want to Fix the Header (2 Rows having Sale Type & Location) and First Two columns (Product Name & Description).

我的表如下所示:

标题行的行跨度为2&前两列(在说明下)也需要冻结.

The Header Row has a rowspan of 2 & the First Two columns(Under Description) also need to be freezed.

我尝试了以下代码:

<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冻结了前两行.

it only freezed the First Column, NOR first Two columns, NOR first two Rows.

我该如何做到这一点，请帮助谢谢

How can I achieve this please Helpthanks

推荐答案

目标输出

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

  1. 制作一个<div>容器，该容器将成为可滚动的组件.确保<div>容器具有固定的width和height，并且应小于实际内容.
  2. 让B，C和D为冻结的行和列.
  3. 让A为实际的表内容.
  4. 使用<table>标签制作组件A，B，C和D.
  1. Make a <div> container that will be the scrollable component. Make sure the <div> container has a fixed width and height, and should be smaller than the actual content.
  2. Let B, C, and D be the freezed rows and columns.
  3. Let A be the actual table content.
  4. Make the components A, B, C, and D using the <table> tag.
<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');
});

这篇关于冻结多行HTML表格的多列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 02:05
Powered by LMLPHP ©2024 冻结多行HTML表格的多列 0.035095