如何删除表并用DIV替换它们？

Question

我没有使用jQuery.我想删除所有表标签(table,td,tr等)及其各自的结束标签,同时保留内容.我无法编辑创建此HTML的代码.它生成这样的东西:

<table>
    <tbody>
       <tr>
           <td>
              <div>
                 <a></a>
              </div>
           </td>
       </tr>
    </tbody>
</table>

我想删除所有垃圾,所以它最终会像这样:

<div>
     <a></a>
</div>

我已经搜索了一段时间,我找不到类似的东西.

Answer 1

假设您正在处理DOM(客户端)并具有对表的引用:

// table references the table DOM element
var keep = document.createDocumentFragment(),
    tds = table.getElementsByTagName('td'),
    td, i, l;

// extract the content of each cell
for (i = 0, l = tds.length; i < l; i++) {
    td = tds[i];
    while(td.firstChild) {
         keep.appendChild(td.firstChild);
    }
}

// insert the content before the table (or where ever you want)
table.parentNode.insertBefore(keep, table);
// remove the table
table.parentNode.removeChild(table);

DEMO

这将迭代所有单元格并将每个子节点附加到DocumentFragment ^[MDN].通过这样做,从表中删除子节点(我们想要保留的内容).然后将所有这些插入到表之前并移除表.

如果您将HTML作为字符串,则可以通过创建虚拟元素来生成DOM:

var dummy = document.createElement('div');
dummy.innerHTML = html;

var table = dummy.getElementsByTagName('table')[0];
// or table = dummy.children[0];

如果这不是您想要的,您必须提供更多信息.