在運行時用DIV包裝表格

給定一個表：

<table id="mytable"> 
<tr><td>row1 col1</td><td>row1 col2</td></tr> 
<tr><td>row2 col1</td><td>row2 col2</td></tr> 
</table>

我知道，如果我是包裹上面<div style="overflow-x:scroll;">，我將有桌子底下水平滾動條。不幸的是，我無法改變表格/ html的寫法。我只能通過JavaScript處理內容。

我想：

document.getElementByID("mytable").style.overflowX = scroll;

，但沒有奏效。

任何想法，如果可以做？怎麼樣？

在此先感謝。

來源

2013-04-04 Jax Santiago

請再具體些！你的目標是什麼？你想滾動你的數據？或者其他的東西？你沒有指定。 – Patriks 2013-04-04 11:06:26

傑克斯，你完成了嗎？如果是，則將答案標記爲正確，以便將問題設置爲已解決，如果不是，請評論什麼是進度。 – Patriks 2013-04-04 12:26:15

是的。我想在系統生成的表上具有水平滾動功能。我確實嘗試了下面給出的代碼。像魅力一樣工作。非常感謝你！ – 2013-04-04 12:54:01

您可以使用

$("#yorutable").wrap($("<div />").css("overflow-x":"scroll"));

有一個div運行時彎曲你的表。

如果您不能添加的jQuery，你可以這樣做

var tbl = document.getElementById('yourtable'); 
var parent = tbl.parentNode; 
var wrapper = document.createElement('div'); 
wrapper.style.overflowX="scroll"; 
wrapper.appendChild(tbl); 
parent.appendChild(wrapper);

來源

2013-04-04 11:03:49 Patriks

他需要爲此包含'jQuery' – chriz 2013-04-04 11:07:46

是的，chriz，我編輯了我的答案。 – Patriks 2013-04-04 11:12:58

投了贊，幹得不錯:) – chriz 2013-04-04 11:46:49

PRATIK的解決方案是教育，但不是100％正確。如果該表是其父項中的最後一項，它將起作用;否則它將表格重新排序爲最後一個。 This question講述了故事的其餘部分。

把整個故事一起：

var tbl = document.getElementById('yourtable'); 
var parent = tbl.parentNode; 
var wrapper = document.createElement('div'); 
wrapper.style.overflowX="scroll"; 
parent.insertBefore(wrapper, tbl); 
wrapper.appendChild(tbl);

來源

2013-10-23 02:39:29 Victoria

在運行時用DIV包裝表格

回答

相關問題