在运行时用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包装表格

回答

相关问题