在DIV中放置表格单元格

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的右侧是“ Korea”。 我想把它放在左边。

有任何想法吗？

谢谢。

Answer 1

首先，我应该说，我不能完全确定我是否理解你的问题。 但是，您想要的是到韩国的链接出现在表格的左侧。 这就是我要回答的。

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

例如：

<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问题-http：//stackoverflow.com/questions/442404/dynamically-retrieve-html-element-xy-position-with-javascript使用getOffset

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