使用纯Javascript将所有页面<table>附加到相应的<div>

debugcn 发表于 Dev

雨果

我的网站上有很多帖子，<table>并且有一个新的响应式布局。

当在移动设备上打开大表元素（大量内容）时，即使使用max-width：100％或其他CSS技巧，它们也会变得比屏幕大。

解决的办法是在溢出表中追加表：scroll<div>，但是我不能编辑所有的帖子内容，所以我想用纯Javascript做到这一点。不允许使用jQuery。

目标是：

获取<table>页面内的所有元素#post
获取他们的内容
附加在这些内容<div class="table_div">在同一个地方，该<table>是
删除旧table元素（不在内部的元素.table_div）

我已经可以从表元素的所有内容，并删除该表，但该部分代码按说应该追加表内容.table_div不起作用。

到目前为止，我的代码的一部分：

    var post = document.getElementById('post'),
    tables = post.getElementsByTagName('table');

for(var i=0; i<tables.length; i++) {
    var table = tables[i];

    var table_content = table.innerHTML,
        table_div = document.createElement('div');

    tables.remove();

    table_div.appendChild(table);
    table_div.className = 'table_div';
    document.appendChild(table_div);
}

完整代码：http：//jsfiddle.net/hmaesta/6mambr93/

请使用纯Javascript帮助。谢谢你。

tetsurom

NodeList有两种模式：静态或实时（请参阅NodeList何时实时且何时静态？）。实时表示DOM中的更改反映在NodeList中。来自的NodeListgetElementsByTagName是实时的。在您的代码中，tables每次删除的长度都会减少#post table。

有一些方法可以解决问题。

使用静态NodeList。例如，querySelectorAll返回静态一个。
将NodeList映射到数组。您可以使用var ts = []; Array.prototype.push.apply(ts, tables);。然后，使用ts代替tables。
保持NodeList的长度和顺序。使用insertChild，而不是appendChild维持秩序，并保持<table>在#post。

这是例子。

var tables = document.querySelectorAll('#post table');
for(var i = 0; i < tables.length; i++) {
    var table = tables[i];
    var table_div = document.createElement('div');
    table.parentElement.insertBefore(table_div, table);
    table_div.className = 'table_div';
    table_div.appendChild(table);
}

https://jsfiddle.net/boy48ngs/2/

注意：<table>在这种情况下，您不需要手动删除。元素不能有多个父元素，并且不能appendChild从当前父元素中删除该元素。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。