jquery固定table第一列或第一行

已于 2022-07-07 15:00:01 修改
阅读量1.6k 收藏 2
点赞数
分类专栏： jquery 文章标签： jquery 前端 javascript
于 2022-05-19 13:52:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35086941/article/details/124861715
版权

使用div的position:fixed或者position:absolute属性把div固定位置，然后调试div的宽度和table的td宽度即可
1、固定第一列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>测试固定table的列</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    
  });
});
</script>
</head>
<body>
<div style="height:300px;overflow-x:scroll;margin-left:100px;width:150px;">
	<div style="position:fixed;height:280px;background-color:white;z-index:9999;width:50px;">1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
<table border=1 style="border-collapse:separate; border-spacing:10px;">
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
	</tr>
</table>
	<table border=1 style="overflow-x: scroll;border-collapse:separate; border-spacing:10px;">
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
	</tr>
</table>
	<table border=1 style="overflow-x: scroll;border-collapse:separate; border-spacing:10px;">
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
	</tr>
</table>
</div>
</body>
</html>

2、固定第一行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>测试固定table的列</title> 
	 <style type="text/css">
    .freezeTd {
        vertical-align: middle;
        font-size: 10px;
        background-color: white;
    }
    #scrollid table tr td {
        vertical-align: middle;
        height: 30px;
        text-align: center;
        border: 0.5px solid #A9A9A9;
    }
    </style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
	$(function(){
	freezeTd();
	})
    function freezeTd() {
        $("#scrollid").scroll(function() { //给table外面的div滚动事件绑定一个函数
            //var left = $("#scrollid").scrollLeft(); //获取横向滚动的距离
            var up = $("#scrollid").scrollTop(); //获取纵向滚动的距离
            if (up > 5) { up = up - 5; } //防止纵向滚动时向上冒出
            var trs = $("#scrollid table tr");
            trs.each(function(i) {
                if ($(this).attr("class") == "freezeTr") {
                    $(this).children(".freezeTd").css({
                        "position": "relative",
                        "top": up,
                        //"left": left,
                        //"background-color": "white",
                        "z-index": "9999"
                    });
                } else {
                    $(this).children(".freezeTd").css({
                        "position": "relative",
                        "top": "0px"
                       // "left": left,
                       // "background-color": "white"
                    });
                }
            });
        });
    }

</script>
</head>
<body>
<div style="overflow-x:scroll; overflow-y: scroll;width:500px;height:150px;" id="scrollid">
            <table cellspacing="0" cellpadding="0" style="width:120%;margin-top:5px;">
                  <tr class="freezeTr">
                        <th class="freezeTd">姓名</th>
                        <th class="freezeTd">年龄</th>
                        <th class="freezeTd">班级</th>
                        <th class="freezeTd">性别</th>
                      </tr>
                  <tr>
                        <td >张三</td>
                        <td>12</td>
                        <td>六一班</td>
                        <td>男</td>
                      </tr>
                  <tr>
                        <td >李四</td>
                        <td>12</td>
                        <td>六一班</td>
                        <td>男</td>
                      </tr>
                  <tr>
                        <td >王五</td>
                        <td>12</td>
                        <td>六一班</td>
                        <td>男</td>
                      </tr>
                  <tr>
                        <td>赵六</td>
                        <td>12</td>
                        <td>六二班</td>
                        <td>男</td>
                      </tr>
                  <tr>
                        <td>余七</td>
                        <td>12</td>
                        <td>六二班</td>
                        <td>女</td>
                      </tr>
				<tr>
                        <td>张三</td>
                        <td>12</td>
                        <td>六一班</td>
                        <td>男</td>
                      </tr>
                  <tr>
                        <td>李四</td>
                        <td>12</td>
                        <td>六一班</td>
                        <td>男</td>
                      </tr>
                  <tr>
                        <td>王五</td>
                        <td>12</td>
                        <td>六一班</td>
                        <td>男</td>
                      </tr>
                  <tr>
                        <td>赵六</td>
                        <td>12</td>
                        <td>六二班</td>
                        <td>男</td>
                      </tr>
                  <tr>
                        <td>余七</td>
                        <td>12</td>
                        <td>六二班</td>
                        <td>女</td>
                      </tr>
                </table>
          </div>

</body>
</html>
勇敢的小提莫
关注
专栏目录
Jquery Table 固定行和列
05-03
Jquery Table 固定行和列,有需要的朋友拿去
table表格首列首行固定
a6680340的博客
09-09 1720
第一步引入jsjquery.stickyheader.js //可以去这里下载自己重新创建一个，还需要引用jq文件 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>第二步html中table结构<ta
table固定首行首列
Stavin Li的博客
12-29 8056
原理 表格左右拆分，再上下拆分，最后拆分为四个table容器 滚动右下table时，加scroll事件，控制左下scrollTop与右上scrollLeft两个table的scroll值 注意 左下、右上overflow: hidden,右下overflow: scroll 左下、右下最后需要新增&lt;td style="visibility: hidden;"&gt;&lt;/td&g...
jQuery选中table第一行或第一列
04-06
通过jQuery选取table的第一行，第一列。
利用jquery实现的表格冻结列(固定列)功能
Akuma专栏
04-23 1万+
  有时候希望一个表格当内容超出了之后，有滑动条，并且希望在滑动的时候某几列固定不动，下面介绍一种利用jquery动态修改列的属性的方法实现的冻结列（固定列）功能:下面的jquery文件路径读者可以自己根据自己的情况更改一下O(∩_∩)O~&lt;html&gt;&lt;head&gt;        &lt;title&gt;表格的冻结列实现&lt;/title&gt;&lt;script sr...
jQuery实现获取table表格第一列值的方法
10-22
要获取表格的第一列值，我们可以利用jQuery的选择器和遍历功能。以下是实现这一功能的关键代码段： ```javascript $(function() { $("#Button1").click(function() { var cols = ""; $("#tb tr").each(function...
jQuery获取table下某一行某一列的值实现代码
10-20
之后，使用.eq(0)方法获取每一行中的第一个单元格元素。 5. 获取单元格文本：通过.nameTd.text()方法获取到选定单元格中的文本内容，该方法返回的是元素的纯文本内容。 6. 显示弹窗结果：使用alert()函数显示获取...
移动端table固定表头与固定第一列
02-20
对于不支持这些特性的老版本浏览器，可能需要使用一些JavaScript库如jQuery Fixed Header Table插件，或者使用传统的方法，如创建重复的表头和第一列，并通过JavaScript同步滚动状态。 总结起来，实现移动端table的...
jquery获取table指定行和列的数据方法(当前选中行、列)
10-21
例如，要获取第一列单元格的内容，可以使用`td[0].innerHTML`，其中`td`数组中的第一个元素即为第一列单元格。 针对选中列的操作，虽然原文中未详细说明获取选中列的具体方法，但根据上下文推断，可以通过类似的...
jquery固定表格行列
04-12
如何使用jquery固定表格行列，固定table表头。
jquery表头固定、列固定完美解决方案
01-10
jquery table 表头固定 列固定 完美解决方案
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
基于jquery的冻结行冻结列插件，可以支持复合表头，对原业务代码侵入较小，非常适合需要实现固定行列对table场景
基于jquery的固定html table表头/列头插件 （加强版）
10-06
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
HTML表格固定第一行第一列效果
11-06
在网页上实现类似Excel的效果，数据滚动条拖动固定第一行和第一列，附代码备注，一目了然
Jquery table固定表头,固定列,全浏览器兼容
11-19
Jquery table固定表头,固定列,全浏览器兼容 Jquery table固定表头,固定列,全浏览器兼容
JQuery实现table固定首行首列
salesforce 菜鸟
03-20 2777
<apex:page id="Page" sidebar="false"> <apex:includeScript value="{!URLFOR($Resource.JQuery, 'jquery-2.0.0.min.js')}" /> <style type="text/css"> .freezeTd { ver...
table固定首行首列css 最简单方法（亲测可用）
weixin_49798182的博客
05-30 5069
业务需要前端使用html 写了个table 如图： 需要滚动条上下左右滑动，但是固定首航首列关键代码：/* 首列固定 */left: 0;z-index: 1;/* 表头固定 */top: 0;z-index: 2;/* 表头首列强制最顶层 */z-index: 3;解析：关键属性 css :在 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位。之后，元素将固定在与顶部距离 0px 的位置，直到视口回滚到阈值以下；同理。
table表头和首列的表格固定-JQuery、js实现的Table表头固定
热门推荐
Harry_一棵树的博客
04-10 4万+
这个是最简单的方法，基于jQuery的解决方案,引入一个两个js就可以解决，当然也有使用css， position: sticky，这个我下一章节会讲它的优缺点，当然为了凸显jQuery的优点， 我就说话使用css的缺点：1.固定表头，和首列需要额外的html，结构复杂。2.体验效果，响应式布局很难解决，几乎没有解决 ，table固定了长宽，在其他页面会看到很别扭，影响美观。3.遇到bug，如
要固定table表格的第一行(列)或某几行（列）不随滚动条滚动
最新发布
weixin_46323078的博客
12-11 2110
在上面的代码中，我们将表格包装在一个具有垂直滚动条的容器中（.table-test）。然后，我们为需要固定的行（在这里是第一行添加了一个类名（.sticky-row）。属性将元素的位置设置为粘性定位，并使用top: 0;属性，当表格内容超出容器高度时，会出现垂直滚动条，从而使固定的行能够保持可见。要固定表格的第一行或某几行不随滚动条滚动，可以使用CSS的position: sticky属性和额外的HTML标记来实现。如果要固定多行，请给需要固定的行都添加.sticky-row类名，并应用相同的CSS样式。
jquery固定第一列
05-30
您可以使用jQuery实现固定第一列的效果，具体步骤如下： 1. 首先，找到表格中第一列的所有单元格，并将它们的宽度保存到一个数组中。 2. 接着，为表格添加一个固定宽度的父容器，并将表格放在容器内。 3. 设置表格的样式，使其具有固定布局。这可以通过将表格的“table-layout”属性设置为“fixed”来实现。 4. 使用CSS将第一列的单元格设置为绝对定位，并将它们的宽度设置为数组中相应的值。 5. 使用jQuery将第一列的单元格的“left”属性设置为它们在表格中的实际位置。 6. 当滚动页面时，使用jQuery将第一列的单元格的“top”属性设置为页面滚动的距离。 这些步骤可以实现固定第一列的效果。具体实现过程可以参考以下示例代码： ``` // 获取第一列的单元格宽度 var colWidths = []; $('table tr td:first-child').each(function() { colWidths.push($(this).outerWidth()); }); // 创建表格容器 var $tableContainer = $('<div>').addClass('table-container'); // 将表格添加到容器中 $('table').wrap($tableContainer); // 设置表格样式 $('table').css({ 'table-layout': 'fixed', 'width': '100%' }); // 设置第一列单元格样式 $('table tr td:first-child').css({ 'position': 'absolute' }); // 设置第一列单元格宽度 $('table tr td:first-child').each(function(i) { $(this).css('width', colWidths[i]); }); // 设置第一列单元格位置 $('table tr td:first-child').each(function() { $(this).css('left', $(this).position().left); }); // 监听页面滚动事件 $(window).scroll(function() { // 设置第一列单元格位置 $('table tr td:first-child').each(function() { $(this).css('top', $(this).parent().position().top - $(window).scrollTop()); }); }); ``` 请注意，这只是一个示例代码，具体实现方式可能因表格结构和样式而异。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值