HTML：如何移動對象的位置？

我有一個HTML表格。沒什麼太花哨。它有thead和tbody。我想知道如何使用JavaScript或jQuery來移動tbody。HTML：如何移動對象的位置？

編輯：所以給你一些關於我在做什麼的背景。我有一張帶有一些信息的桌子（誰在乎它是什麼）。使用jQuery，我固定了標題，這樣當我向下滾動標題時，它仍然存在。這一切都運行良好，與標題和第一行重疊的小問題。所以我需要將tbody的頂部向下移動。含義標題將保持原樣，並且主體將向下移動一點，以便我可以看到表格的第一行（即標題後面的第一行）。

我想知道是否有這樣做的方式與jQuery或JavaScript。

來源

2013-10-22 aamunye

你所說的意思_ 「移動[它]下來」做_？以後在_DOM Tree_中？它有不同的風格？ –

您能否提供更多關於您想要做什麼的背景？這聽起來像是用CSS而不是javascript實現的更好。 –

向我們展示一些代碼，準確描述您想要的內容。在jsFiddle中的一個例子將是完美的 –

-1

你可以使用jQuery的渦旋式壓縮機方法http://api.jquery.com/scroll/

我需要更多的信息，但它聽起來像是你會做這樣的事情：

$(window).scroll(function(){ 
    $("table").animate({marginTop: 50}, 250); 
});

編輯：我知道這個答案已被接受這是正確的，但似乎我誤解了這個問題，正如downvotes所表明的那樣。我認爲OP是在得到表格後滑下並保持固定，就像表頭一樣。我建議使用滾動方法，因爲這是如何讓表格在滾動上更改位置狀態的方式。

正如其他人所指出的，你只是想以推入表頭+間距的期望的高度，就像這樣：

table { 
    margin-top: 80px; 
}

來源

2013-10-22 14:22:56 ryanSrich

謝謝，這是我需要的。對於其他人，我很抱歉沒有發佈代碼，因爲相關部分大約有300行，代碼本身有9,000多行，有9個外部.js文件。所以jsFiddle無法處理它。 – aamunye

這是否解決了你的問題，這是不正確的做法。使用此代碼，每次滾動事件觸發時都會運行一個動畫函數，每滾動一次，就會發生數十次。此外，您不斷將該房產的動畫設置爲相同的位置，這將在第一次運行後不起作用。你完全不應該使用jquery，使用css可以達到同樣的效果。 –

作爲演示，我設置了這個小提琴（http://jsfiddle.net/NvCET/）。滾動並觀看函數調用計數驟升。然後嘗試*刪除所有JavaScript *並再次運行它。請注意，沒有區別。通過在那裏添加js，你只是在旋轉週期，這是一個不必要的浪費，而不是解決問題的正確方法。 –

我試着在這裏重現你的問題。當然有更好的方法來達到同樣的效果，但是這是你有的代碼類型嗎？有沒有必要使用jQuery來保持表頭固定，所以我用CSS：

http://jsfiddle.net/LLjdk/

相關CSS：

thead { 
    position: fixed; 
    background: #fff; 
} 

table { 
    margin-top: 28px 
}

注意，表頭是固定的（帶有滾動移動），並且背景被設置爲當表格的其餘部分落後時，它不顯示。最後，在表格的頂部添加了一個邊距，以便將其平滑下來以避免重疊。

來源

2013-10-22 14:20:54

我不知道如果這是你在找什麼但從您的描述中，我明白您正試圖使thead始終顯示在頁面的頂部。這是我想出來的。

thead { 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: white; 
} 
table { 
    margin-top: 30px; 
}

DEMO

希望它會幫助你

來源

2013-10-22 14:26:57

HTML：如何移動對象的位置？

回答

相關問題