创建用页面滚动的表格行（子标题？）

时间：2014-12-03 14:13:32

标签： javascript jquery html css

我有一个长桌子，我需要让子标题滚动它们的表格部分。我知道有很多函数可以滚动<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>

所以我需要线程中的两行向下滚动包含整个表格的页面，以及带有＆＃39;位置＆＃39;的行。向下滚动页面直到找到新的“位置”，然后需要切换到滚动该行。

编辑：我不认为这是链接问题的重复。所有这些只能解决页面滚动的标题，我需要＆＃39; subheader＆＃39; （表的行）滚动，直到它到达下一个子标题，依此类推未定义的次数。

1 个答案:

答案 0 :(得分：0)

好的，所以我写了一些代码，完全符合你的要求，但远不是成品。代码解释最后。在这里：

我所做的很简单。

  1. 测量滚动的总距离。
  2. 检查滚动距离是否在视口中保持thead或tr。
  3. 如果是，则应用css移动它
  4. 否则，应用充当极值的css - 视口位于元素的上方或下方。

    5. 希望它有所帮助。

    PS ：我知道我应该为它做一个小提琴，我确实尝试过，但我无法让它发挥作用。如果有人可以为这段代码做一个小提琴，我会非常感激。

    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>

相关问题
最新问题