在运行时用DIV包装Table

Wrap Table with DIV at runtime

本文关键字：包装 Table DIV 运行时      更新时间：2023-09-26

第一个问题。

给定一个表:

<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;

但它没有工作。

你知道这能不能做到吗?如何?

可以使用

$("#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);

Pratik的解决方案具有教育意义，但并非100%正确。如果表是其父表的最后一项，它将工作;否则，它会将表重新排序到最后。这个问题说明了故事的其余部分。

把整个故事放在一起:

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);
相关文章：