javascript - 创建随页面滚动的表行(副标题？)-6ren

javascript - 创建随页面滚动的表行(副标题？)

转载作者：太空宇宙更新时间：2023-11-03 17:51:33

我有一个很长的表格，我需要让副标题随着表格的一部分滚动。我知道有很多函数可以滚动 <thead> ，但在让其他行也滚动时，我有点迷茫。基本上，这是表的结构。

<table>
    <thead>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Date</th>    
            <th>Date</th>
        </tr>
        <tr>
            <th></th>
            <th>Sales</th>
            <th>Qty</th>    
            <th>%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Location #1</td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        //....undefined number of rows
        <tr>
            <td>Location #2</td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>$0.00</td>
            <td>$0.00</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td></td>
            <td>$0.00</td>
            <td>0.00</td>
            <td>0.00%</td>
        </tr>
        //...and so on, there can be an undefined number of groupings like this
    </tbody>
</table>

所以我需要线程中的两行与整个表格一起向下滚动页面，以及带有“位置”的行与页面一起向下滚动直到到达新的“位置”，然后它需要切换到滚动该行。

编辑:我认为这不是链接问题的重复。所有这些都只解决标题随页面滚动的问题，我需要“子标题”(表格的行)滚动直到出现下一个子标题，依此类推未定义的次数。

最佳答案

好的，所以我已经编写了一些完全符合您要求的代码，但离成品还很远。代码解释在最后。开始了:

我所做的非常简单。

测量滚动的总距离。
检查滚动距离是否使 thead 或 tr 保持在视口(viewport)中。
如果是，则应用css移动它
否则，应用充当极端的 css - 视口(viewport)位于元素上方或下方。

希望对您有所帮助。

PS:我知道我应该为它制作一个 fiddle ，我确实尝试过，但我无法让它工作。如果有人可以修改这段代码，我将不胜感激。

var table =  $("#data_table");

	var head  =  $("#data_table thead");
	var head_top=head.offset().top;

	var rows  =  $("#data_table tbody tr");
	var row_tops  =  [];
	for(var i =0; i< rows.length/6; i++){
		row_tops[i]=rows[6*i].offsetTop + head_top - 60;
		rows[i*6].style.background="#555";
		rows[i*6].style.color="#fff";
	}

	var scrolled = null;
	var offset = null;

	var scroller=function(){
		scrolled = $(window).scrollTop();

		if (scrolled - head_top < 0){
			offset=0;
		} else if(scrolled - head_top > table.height()){
			offset=table.height();
		} else{
			offset=scrolled - head_top;
		};
		head.css("transform","translateY("+offset+"px)");

		for(var i=0; i<row_tops.length; i++){
			if (scrolled - row_tops[i] < 0){
				offset=0;
			} else if(scrolled - row_tops[i] > rows[6*i].offsetHeight*6){
				offset=rows[6*i].offsetHeight*6;
			} else{
				offset=scrolled - row_tops[i];
			};

			rows[6*i].style.transform="translateY("+(offset)+"px)";
		}
	};

	$(window).scroll(scroller);

table{
    border: 2px solid #ccc;
    position: relative;
    padding-top: 60px;
    padding-bottom: 0px;
}
thead{
    position: absolute;
    top: 0;
    width: 100%;
    height: 60px;
    background: #234;
    color: white;
    transition: transform 100ms ease-out;
    z-index: 1;
}
thead th{
    border-bottom:  1px solid #fff;
    width: 100%;
}
tbody tr{
    background: white;
    transition: transform 100ms ease-out;

}

<br><br><br><br><br><br>
    	<h2>There's a lot of br elements, just to check scrolling effects<br>The main table can be seen after scrolling a bit</h2>
    	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    	<table id="data_table">
    		<thead>
    			<tr>
    				<th></th>
    				<th>Date</th>
    				<th>Date</th>    
    				<th>Date</th>
    			</tr>
    			<tr>
    				<th></th>
    				<th>Sales</th>
    				<th>Qty</th>    
    				<th>%</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>Location #1</td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td>Location #2</td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td>Location #3</td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td>Location #4</td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td>Location #5</td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>$0.00</td>
    				<td>$0.00</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>$0.00</td>
    				<td>0.00</td>
    				<td>0.00%</td>
    			</tr>
    		</tbody>
    	</table>

    	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

关于javascript - 创建随页面滚动的表行(副标题？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27273892/

文章推荐： css - 使用 CSS 的下拉菜单 :target pseudo

文章推荐： css - 全尺寸背景图像 : fallback for accessibility and print

文章推荐： c# - 根据特定条件将列表分为两个列表

文章推荐： c# - 合并列表中实体的两个属性并使用 Linq 将其展平

mysql - 同步/流式传输 MySQL 表/表(连接表)与 PostgreSQL 表/表
我有一台 MySQL 服务器和一台 PostgreSQL 服务器。需要从多个表中复制或重新插入一组数据 MySQL 流式传输/同步到 PostgreSQL 表。这种复制可以基于时间(Sync)或事
php - 从用户(表)获取数据其中用户(表)的id等于 friend (表)的id
如果两个表的 id 彼此相等，我尝试从一个表中获取数据。这是我使用的代码: SELECT id_to , email_to , name_to , status_to
sql - Excel 表 SQL 表
我有一个 Excel 工作表。顶行对应于列名称，而连续的行每行代表一个条目。如何将此 Excel 工作表转换为 SQL 表？我使用的是 SQL Server 2005。最佳答案这取决于您使用哪
mysql - 如何将两个django模型(表)合并为一个模型(表)
我想合并两个 Django 模型并创建一个模型。让我们假设我有第一个表表 A，其中包含一些列和数据。 Table A -------------- col1 col2 col3 col
mysql - 表 1、表 2 的多列左连接
我有两个表:table1，table2，如下所示 table1: id name 1 tamil 2 english 3 maths 4 science table2: p
sql - 大传感器数据最佳选择。表 SQL 与 Azure 表
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 1 年前。 Improve th
dynamics-ax-2009 - 表=表与表.数据(表)
下面两个语句有什么区别？ newTable = orginalTable 或 newTable.data(originalTable) 我怀疑 .data() 方法具有性能优势，因为它在标准 AX 中
SQL Server 表 -(或可能是任何 SQL 表)没有主键会影响性能吗？
我有一个表，我没有在其中显式定义主键，它并不是真正需要的功能......但是一位同事建议我添加一个列作为唯一主键以随着数据库的增长提高性能...... 谁能解释一下这是如何提高性能的？没有使用索引(
php - 将产品详细信息插入 'product' 表，并将产品图像插入 'image' 表
如何将表“产品”中的产品记录与其不同表“图像”中的图像相关联？我正在对产品 ID 使用自动增量。我觉得不可能进行关联，因为产品 ID 是自动递增的，因此在插入期间不可用! 如何插入新产品，获取产品
python - 创建一个新的 sql 表，其中的列源自另一个 sql 表
我有一个 sql 表，其中包含关键字和出现次数，如下所示(尽管出现次数并不重要): ____________ dog | 3 | ____________ rat | 7 | ____
MySQL LAST_INSERT_ID() 与 INSERT INTO 表 SELECT FROM 表
是否可以使用目标表中的LAST_INSERT_ID更新源表？ INSERT INTO `target` SELECT `a`, `b` FROM `source` 目标表有一个自动增量键id，我想将其
mysql - 查询 - 在简单的 mysql 内连接中定义(表，表)
我正在重建一个搜索查询，因为它在“我看到的”中变得多余，我想知道什么 (albums_artists, artists) ( ) does in join? is it for boosting pe
innodb - mysqldump 备份缺少所有 innodb 表，但没有 MyISAM 表
以下是我使用 mysqldump 备份数据库的开关: /usr/bin/mysqldump -u **** --password=**** --single-transaction --databas
html - 为什么 MySQL 表中的所有行都是相同的？ (MySQL 表 > HTML 表)
我试图获取 MySQL 表中的所有行并将它们放入 HTML 表中: Exam ID Status Assigned Examiner
mysql - 查询 'photos' 表，同时查询 'bookmarks' 表，以便知道添加书签的照片
如何查询名为 photos 的表中的所有记录，并知道当前用户使用单个查询将哪些结果照片添加为书签？这是我的表格: -- -- Table structure for table `photos` -
Mysql MEMORY 表 vs InnoDB 表(很多插入，很少读取)
我的网站都在 InnoDB 表上运行，目前为止运行良好。现在我想知道在我的网站上实时发生了什么，所以我将每个页面浏览量(页面、引荐来源网址、IP、主机名等)存储在 InnoDB 表中。每秒大约有 10
mysql - 如何在 mysql 中存储客户数据(2 表 vs 1 表)
我在想我会为 mysql 准备两个表。一个用于存储登录信息，另一个用于存储送货地址。这是传统方式还是所有内容都存储在一张表中？对于两个表...有没有办法自动将表 A 的列复制到表 B，以便我可以引用
mysql - 表 1 包含名字和姓氏，表 2 包含两列引用表 1 上的名称
我不是程序员，我从这个表格中阅读了很多关于如何解决我的问题的内容，但我的搜索效果不好我有两张 table 表 1:成员 id*| name | surname -------------------
c# - 如何在 ASP.NET 中显示 "View"表(SQL 表)？
我知道如何在 ASP.NET 中显示真实表，例如 public ActionResult Index() { var s = db.StaffInfoDBSet.ToList(); r
php - INSERT INTO 表 VALUES.. 与 INSERT INTO 表 SET 错误
我正在尝试运行以下查询: "insert into visits set source = 'http://google.com' and country = 'en' and ref = '1234

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 创建随页面滚动的表行(副标题？)