在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/