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

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

Answer 2

请参阅此插件，它完全符合您的要求

https://github.com/ryandoom/jquery-plugin-table-to-div

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

2 个答案: