Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/444.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 克隆和显示表_Javascript_Jquery_Html Table - Fatal编程技术网

Javascript 克隆和显示表

Javascript 克隆和显示表,javascript,jquery,html-table,Javascript,Jquery,Html Table,这相当棘手。我有一个比页面宽的表格,因此用户必须水平滚动才能看到某些列。但随后他们就看不见最左边的标题栏了 在我看来,我并不负责非常奇怪的表格结构设置,但它是这样的: <table> <tr> <td>[THE HEADER COLUMN (as a separate table)]</td> <td>[THE TABLE BODY (as a separate table)]</td>

这相当棘手。我有一个比页面宽的表格,因此用户必须水平滚动才能看到某些列。但随后他们就看不见最左边的标题栏了

在我看来,我并不负责非常奇怪的表格结构设置,但它是这样的:

<table>
    <tr>
        <td>[THE HEADER COLUMN (as a separate table)]</td>
        <td>[THE TABLE BODY (as a separate table)]</td>
    </tr>
</table>
因此,当用户将“标题栏表格”从视图中滚动出来时,我需要在屏幕边缘显示“标题栏表格”,并将鼠标移到屏幕边缘

我认为克隆标题表然后临时显示是一种方法,因为页面宽度会改变,所以不能移动原始标题表。这似乎是一个有点混乱的解决方案,特别是因为原始列标题表有与其关联的ID

你认为这是正确的方法吗?有什么想法吗


我不需要任何jQuery事件处理方面的帮助,我也不能使用可滚动表来代替这种方法。

如果您将第一个表的css设置为fixed,left设置为0,那么它将粘在屏幕的左边缘,您只需检查用户在每个滚动事件后是否已开始滚动:

$(window).scroll( function(){ // fired after every scroll event
    if($(window).scrollLeft() > 0){ // check horizontal scroll
        $("#table1").css("position","fixed");
    } else {
        $("#table1").css("position","relative");
    }
});

当你给予占有时会发生什么:绝对;排名:0;左:0;是否在页眉列内移动表格?@eugeneK如果0,0表示的是可见页面左上角,即忽略滚动偏移,则表格会按预期移动,但这会导致页面宽度发生变化,从而导致滚动偏移,因此事情变得有点疯狂。使用JSFIDLE提供一些示例…我是css n00b,所以我不知道位置:固定。非常感谢您的回复!