jquery实现table的冻结列

最新推荐文章于 2020-06-09 17:31:04 发布
最新推荐文章于 2020-06-09 17:31:04 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>new document</title>
<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script type="text/javascript">
    function FixTable(TableID, FixColumnNumber, width, height) {
    
        $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
      
      $('<div id="' + TableID + '_tableColumn"></div>'
      + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
      var oldtable = $("#" + TableID);
      var tableColumnClone = oldtable.clone(true);
      tableColumnClone.attr("id", TableID + "_tableColumnClone");
      $("#" + TableID + "_tableColumn").append(tableColumnClone);
      $("#" + TableID + "_tableData").append(oldtable);
      
      var ColumnsWidth = 0;
      var ColumnsNumber = 0;
      $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
        ColumnsWidth += $(this).outerWidth(true);
        ColumnsNumber++;
      });
      ColumnsWidth += 2;
      if ($.browser.msie) {
        switch ($.browser.version) {
          case "7.0":
            if (ColumnsNumber >= 3) ColumnsWidth--;
            break;
          case "8.0":
            if (ColumnsNumber >= 2) ColumnsWidth--;
            break;
        }
      }
      
      $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
      
      $("#" + TableID + "_tableData").scroll(function () {
          $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
          if(ColumnsWidth <= $("#" + TableID + "_tableData").scrollLeft())
          {
              return false;
          }
        });
      
      
      $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height , "position": "relative", "z-index": "40", "background-color": "Silver" });
      $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
      if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
          $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
          $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
        }
      
      $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
      $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
      
    }
$(document).ready(function () {
      FixTable("MyTable", 1, 600, 400);
    });
  </script>
</head>
<body>
    <table
        style="margin: 0; border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"
        id="MyTable" border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th style="text-align: center; width: 80px" rowspan="3">姓名</th>
                <th style="text-align: center; width: 80px" rowspan="3">班级</th>
                <th style="text-align: center" colspan="10">成绩</th>
            </tr>
            <tr>
                <th style="text-align: center" colspan="3">主科</th>
                <th style="text-align: center" colspan="3">文科</th>
                <th style="text-align: center" colspan="3">理科</th>
                <th style="text-align: center; width: 80px" rowspan="2">总分</th>
            </tr>
            <tr>
                <th style="text-align: center; width: 80px">语文</th>
                <th style="text-align: center; width: 80px">数学</th>
                <th style="text-align: center; width: 80px">英语</th>
                <th style="text-align: center; width: 80px">政治</th>
                <th style="text-align: center; width: 80px">历史</th>
                <th style="text-align: center; width: 80px">地理</th>
                <th style="text-align: center; width: 80px">物理</th>
                <th style="text-align: center; width: 80px">化学</th>
                <th style="text-align: center; width: 80px">生物</th>
            </tr>
            <!--
         <tr>
         <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   姓名
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   班级
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   语文
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   数学
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   英语
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   政治
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   历史
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   地理
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   物理
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   化学
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   生物
                 </th>
                 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">
                   总分
                 </th>
 
         </tr>
       -->
        </thead>
        <tbody>
            <!-- 数据行 -->
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
            <tr>
                <td>学生32</td>
                <td>班级1</td>
                <td>29</td>
                <td>25</td>
                <td>146</td>
                <td>28</td>
                <td>79</td>
                <td>73</td>
                <td>47</td>
                <td>8</td>
                <td>91</td>
                <td>526</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
vicky_lxw
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
基于jquery的冻结行冻结列插件，可以支持复合表头，对原业务代码侵入较小，非常适合需要实现固定行列对table场景
【jQuery 冻结任意行列】冻结任意行和列的jQuery插件
weixin_34195142的博客
08-19 418
    实现原理： 创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建存放冻结列表格的div，并放置在数据表格的上层。如果需要行列都冻结时，则除了创建冻结行、冻结列表格的div，还需要创建左上角的固定行列表格的d...
JQUERY冻结table行或列js
xieedeni的博客
10-26 2543
freezeTable.js/* * 锁定表头和列 * * 参数定义 * table - 要锁定的表格元素或者表格ID * freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0 * freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0 * width - 表格的滚动区域宽度 * height - 表格的滚动区域
JQuery实现table固定首行首列
qq_29319163的博客
03-20 2700
<apex:page id="Page" sidebar="false"> <apex:includeScript value="{!URLFOR($Resource.JQuery, 'jquery-2.0.0.min.js')}" /> <style type="text/css"> .freezeTd { ver...
JQuery实现table冻结列
sinat_34620530的博客
06-09 2516
由于公司代码框架古老使用静态html画的页面，无法使用bootstrap或easyui实现冻结列 最终再github上面找到的冻结列的实现 github地址 https://qiuyaofan.github.io/jqTable/ html展示 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h
jQuery实现表格冻结行和列
06-19 385
　　前几天，遇到一个需求是要将表格的前几行和前几列冻结即固定，就是在有滚动条的情况下，保持那几行和那几列固定，这个需求其实是一个非常常见的需求，因为在涉及好多行和列时，在拖动滚动条时，我们需要知道每行每列表示的是什么意思，当被遮挡后，就很难记住是表示的什么内容了，如下图所示：我想要保持学生姓名和在线状态保持不动，以及前三行表示章节以及微课习题的内容保持不变，当然在easyui或者其他的一...
利用jquery实现的表格冻结列(固定列)功能
热门推荐
Akuma专栏
04-23 1万+
  有时候希望一个表格当内容超出了之后，有滑动条，并且希望在滑动的时候某几列固定不动，下面介绍一种利用jquery动态修改列的属性的方法实现的冻结列（固定列）功能:下面的jquery文件路径读者可以自己根据自己的情况更改一下O(∩_∩)O~&lt;html&gt;&lt;head&gt;        &lt;title&gt;表格的冻结列实现&lt;/title&gt;&lt;script sr...
table表格实现行、列冻结
aystnd
05-21 2080
客户要求实现对表格数据的头几行或者头几列进行冻结，即滚动时保持这几行/列不动，通过网上查找代码，参考已有的代码的思路，实现了可以任意对行、列进行冻结。 实现原理： 创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建...
table 冻结列
06-05
JQUERY冻结table列, 多列或者单列都可以控制，仿excel的冻结列。 或者列过多,固定前两列保持不动 固定列
jquery 冻结行列
07-23
jquery冻结Table行列详细Demo
jquery 列表行冻结、列冻结
12-15
基于jquery 实现 table 行冻结、列冻结，本来想免费分享给大家，可是csdn要求最低必须是2分，希望大家用的好
datatable的固定列插件
09-06
里面有一些样例，就是样例里的链接可能有问题，只能参考代码，样例或者下载可以去官网：https://datatables.net/releases/FixedColumns-3.2.2.zip
jQuery实现冻结表格行和列
10-24
本文给大家分享的是前些日子做的项目中的一个客户的特殊要求，很少遇到，查询了好久的度娘，才算找到解决方案，这里分享给大家，有需要的小伙伴可以参考下。
jquery冻结列实例
11-15
jquery冻结列实例展示，浅显易懂，易于上手。jquery冻结列实例展示，浅显易懂，易于上手。
table的行列冻结、行冻结、列冻结
06-13
基于jquery 实现 对已有table表冻结行列、冻结行、冻结列，兼容主流浏览器。代码中有详细的注释说明，有使用案例。实际使用中如果发现有缺陷，欢迎留言提建议，或联系
jQuery实现表格冻结顶栏效果
12-09
昨天晚上公司遇到个小需求，就是实现类似表格冻结顶栏的效果，具体描述就是下面动态图的效果 这样的效果不算是很难，但是实现起来确实挺麻烦的，这里的难点就不多说了，就是这个效果一下子弄到一点多，最后在我经常...
TableFreeze冻结列.rar
05-14
项目中需要用到自己动态写table拼接的，前几列冻结，头冻结，底部冻结的，适合使用本案例。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
钢筋混凝土污水池及提升泵站施工方案.doc
最新发布
05-03
课程设计污水处理
jQuery table删掉最后一列
07-14
要使用jQuery删除表格中的最后一列，你可以使用以下代码： ```javascript $(document).ready(function() { // 选择要操作的表格 var table = $('#yourTable'); // 获取表格中的所有行 var rows = table.find('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值