Question

我的网站上有很多帖子<table>和新的响应式布局。

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

解决方案是在 overflow：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。谢谢。

Answer 1

请参阅此updated fiddle：

procedure TAskYTSThread.MakeDDEConv;
begin
 with TDDEClientConv.Create(Form1) do
 begin
    ConnectMode:=ddeManual;
    ServiceApplication:='explorer.exe';
    SetLink('Folders', 'AppProperties') ;
    Form1.Memo1.Lines.Add('Openlink çağrılacak Gönderilecek.');
    if OpenLink then
    begin
      Form1.Memo1.Lines.Add('Link Open Edildi.');
      ExecuteMacro('[FindFolder(, C:\)]', False) ;
      CloseLink;
    end
    else
    begin
      Form1.Memo1.Lines.Add('OLMADIIIIIII');
    end;
    Free;
  end;
end;

procedure TAskYTSThread.Execute;
var
  blnRunning : boolean ;
  FYtsTopicName, strMacro : string ;
begin
  inherited;
  FDDE_BUSY.Enter ;
  try
    blnRunning := IsYTSRunning;
    Synchronize(MakeDDEConv); // this is key point

  finally
    FDDE_BUSY.Leave ;
  end;
end;

我使用replaceChild方法首先用新创建的var post = document.getElementById('post'), tables = post.getElementsByTagName('table'); for(var i=0; i<tables.length; i++) { var table = tables[i]; var elem = document.createElement('div'); elem.className = 'table_div'; post.replaceChild(elem, table); elem.appendChild(table); }替换table元素。然后，我将原始的div元素附加到table。

Answer 2

NodeList有两种模式; 静态或直播（参考When is NodeList live and when is it static?）。 Live 表示DOM中的更改会反映在NodeList中。来自getElementsByTagName的NodeList是实时的。在您的代码中，每次删除tables时，#post table的长度都会递减。

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

使用静态 NodeList。例如，querySelectorAll返回静态值。
将NodeList映射到Array。您可以使用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会从当前父元素中删除元素。

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

2 个答案: