Question

我已经寻求帮助，但我似乎得到的是如何将DIV定位在表格单元格中。我想在DIV中放置一个表格单元格。

在我的网站上，我有一个列出活动，地点，飞机等的“时间表”。我用过一张桌子来介绍这个。该表非常宽（约14,000像素），并以大约900像素宽的DIV显示。这意味着观众需要从一侧滚动到另一侧以在不同时间查看事件 - 这就是我想要的。

该表使用HTML和一些基本的PHP编写。

首先，每次观看者更改页面时，时间线视图都会“重置”，因此它始终显示最早的时间/最左边的单元格。我四处寻求修复，将表格中最顶行的特定单元格的文本放在DIV的中心 - 也就是说，如果观众切换到关于越南的页面，那么在时间轴中，顶部带有“越南”文本的行单元格将以DIV为中心。如果观众切换到另一个页面，比如“1945到1950”，那么居中的单元格将是“1945到1950”。

有人使用focus（）帮助了一些Javascript。这有点好用，但所需的文字现在在DIV的右边。

然后我想，最好把文字放在DIV的左边，这样各个时间段就会在视野中开始。困惑？

这是我的一个页面： http://www.satans-kittens.net/korea.php

如您所见，在时间表/ DIV中，“韩国”一词位于DIV的右侧。我想把它放在左边。

有什么想法吗？

感谢。

Answer 1

首先，我应该说我不完全确定我理解你的问题。但是，您希望链接到韩国的链接显示在表格的左侧。这就是我打算回答的问题。

将包含韩国链接的标记放在文档树中的上一个单元格中。

例如：

<tr id="period">
  <td colspan="7"><a id="tlWWII" href="http&#58;//www.satans-kittens.net/wwii.php#tlWWII">World War II</a></td>
  <td colspan="25"><a id="tl45250" href="http&#58;//www.satans-kittens.net/45to50.php#tl45250">1945 to 1950</a></td>
  <td colspan="64"><a id="tlKorea" href="http&#58;//www.satans-kittens.net/korea.php#tlKorea">Korea</a></td>
  <td colspan="24"><a id="tl53263" href="http&#58;//www.satans-kittens.net/53to63.php#tl53263">1953 to 1963</a></td>
  <td colspan="132"><a id="tlVietnam" href="http&#58;//www.satans-kittens.net/vietnam.php#tlVietnam">Vietnam</a></td>
  <td colspan="120"><a id="tlDisestab" href="http&#58;//www.satans-kittens.net/disestab.php#tlDisestab">The Last Crusade &amp; Phinal Phantoms</a></td>
  <td colspan="50"></td>
  <td colspan="10"></td>
</tr>

其中我只是将您的每个链接移动到上一个单元格。毫无疑问，你必须调整你的colspans ...

另一种选择是尝试左右浮动......

Answer 2

你可以使用这个功能。到div左边的活动锚点。

看到它在这里工作

http://jsfiddle.net/kL2js/

function adjustScrollBar(id){
        var pos = $("#"+id).position();
        while(pos.left >0){
            pos = $("#"+id).position();
            $("#TL").scrollLeft($("#TL").scrollLeft()+1);
        }
}

编辑：可能会帮助你。

/* jQuery required */

function adjustScrollBar(id,parentid){
    var pos = $("#"+id).position();
    while(pos.left >10){
        pos = $("#"+id).position();
        $("#"+parentid).scrollLeft($("#"+parentid).scrollLeft()+1);
    }
}
adjustScrollBar('tlKorea','TL'); 

/* jQuery not required */

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.parentNode;
    }
    return { top: _y, left: _x };
}

function adjustScrollBar2(id,parentid){
    while(getOffset( document.getElementById(id) ).left > 22 ){
     document.getElementById(parentid).scrollLeft += 1;
    }
}


adjustScrollBar2('tlKorea','TL'); // jQuery not required

只需调用其中一个函数，即使用当前活动锚点的id调用焦点代码。

我在SO问题中使用了getOffset -http：//stackoverflow.com/questions/442404/dynamically-retrieve-html-element-x-y-position-with-javascript

更新了jsfiddle - http://jsfiddle.net/kL2js/1/

将表格单元格放在DIV中

2 个答案: