在窗口中居中動態生成的表格單元格

Question

我正在處理一個員工目錄，該目錄允許用戶搜索員工並以樹/組織結構圖類型的布局顯示有關他們的信息。 我正在使用Google的組織結構圖代碼繪制圖表。 它在<td>顯示每個員工的聯系卡，經理和下屬在其上方或下方在不同的<tr> 。 輸出看起來像這樣：

如果一個員工只有少數幾個下屬，則用戶必須水平滾動才能看到所有下屬。 沒問題

我的問題是，如果有10個以上，您將完全看不到要搜索的員工，而必須向右滾動直到找到他們：

這似乎很煩人。 我嘗試只是將<a name="anchor">放入卡中，並在頁面加載時跳轉到該卡上，但是它滾動的距離足夠遠， 幾乎無法將其顯示在屏幕上。

理想情況下，它將卡片居中，將其放在用戶的焦點上。

頁面加載時，是否可以直接跳到相關員工？

如果有幫助，請參見以下代碼片段，以了解單個卡的外觀：

<td>
    <h1>Mike</h1>
    <div class="cardBody">
        <img src="Images/stock1.jpg" style="float:left; margin-right:5px;" /> 
        <table class="data" cellpadding="0">
            <tr>
                <td><i class="fa fa-briefcase"></i></td>
                <td><span style="color:red;">President</span></td>
            </tr>
            <tr>
                <td><i class="fa fa-building"></i></td>
                <td>Administration</td>
            </tr>
            <tr>
                <td><i class="fa fa-globe"></i></td>
                <td>Home Office</td>
            </tr>
            <tr>
                <td><i class="fa fa-phone"></i></td>
                <td>Ext. 2402</td>
            </tr>
            <tr>
                <td><i class="fa fa-envelope"></i></td>
                <td><a href="mailto:email@address.com">Send Email</a></td>
            </tr>
        </table>
    </div>
</td>

Answer 1

對您嘗試到的東西有些困惑。 jQuery對您有用嗎？ 如果是這樣， 此解決方案似乎很簡單。

$(container).scrollTo(target);

現在，如果您可以通過url查詢傳遞“目標”。 您應該能夠解析和使用它，如下所示：

注意：這里假設您有一個網址，例如www.website/searchpage.html?i=targetID

另外：此設置可以使用ID，因此如果需要使用類，請更改代碼。

var params;    
function parseURLParams(url) {
        var queryStart = url.indexOf("?") + 1,
            queryEnd = url.indexOf("#") + 1 || url.length + 1,
            query = url.slice(queryStart, queryEnd - 1),
            pairs = query.replace(/\+/g, " ").split("&"),
            parms = {}, i, n, v, nv;

        if (query === url || query === "") {
            return;
        }

        for (i = 0; i < pairs.length; i++) {
            nv = pairs[i].split("=");
            n = decodeURIComponent(nv[0]);
            v = decodeURIComponent(nv[1]);

            if (!parms.hasOwnProperty(n)) {
                parms[n] = [];
            }

            parms[n].push(nv.length === 2 ? v : null);
        }
        return parms;
    }

$(document).ready(function(){
   params = parseURLParams(window.location.href);
   $("#Container").scrollTo("#"+params.i);
});

希望這對某人有幫助。

編輯：我知道您希望它居中，這將有些棘手。 您將需要容器比要容納所有數據所需的容器大得多（或無限？），然后滾動到所需元素的位置，再加上一個偏移量，使容器的可見寬度為一半，並且元素寬度的一半。 計算此數字時，可能只想創建一個具有絕對位置的不可見元素。 然后將元素移到該位置，最后將屏幕移至該元素。

Answer 2

您可以將URL附加到，以便它跳轉到具有特定ID的div。 例如，在您發布的卡代碼中，您可以將div更改為此：

<div class="cardBody" id="mikeCard">

然后將頁面鏈接更改為

<a href="employees.html#mikeCard">Link to page with Mike's card centered</a>

或者，如果您想從同一頁面鏈接到該部分，只需執行

<a href="#mikeCard">Jump to Mike's card</a>