我正在尝试使用 jQuery/JavaScript 将所有 <table>、<tr> 和 <td> 标签替换为 <div> 标签 [关闭]答案

【问题标题】：I am trying to use jQuery/JavaScript to replace all <table>, <tr>, and <td> tags with <div> tags [closed]我正在尝试使用 jQuery/JavaScript 将所有 <table>、<tr> 和 <td> 标签替换为 <div> 标签 [关闭]
【发布时间】：2011-10-17 16:43:55
【问题描述】：

我在设计的 html 模板中有 asp 自动生成的代码，该模板使用表格进行布局。我想摆脱页面某个部分中的表格和其他布局功能，但我不能直接更改实际的 html。它需要是一个客户端脚本解决方案，我正在尝试使用 jQuery/JavaScript 将所有 <table>、<tr> 和 <td> 标签替换为 <div> 标签并去除所有其他布局，只留下内容由 div 标签分隔的部分。但是我一直遇到问题。由于我不是 jQuery/JavaScript 方面的专家，任何指针/示例将不胜感激。以下是自动生成的 html 代码示例：

<table border="0" cellpadding="0" cellspacing="0" class="mainpage_features">
        <tr valign="middle">
            <td align="center" colspan="3">
                <table cellspacing="0" cellpadding="0" class="featured_border_image">
                    <tr>
                        <td width="1%">
                            <img src="image.gif" border="0" />
                        </td>
                        <td width="98%" background="image.gif">
                        </td>
                        <td width="1%">
                            <img src="image.gif" border="0" />
                        </td>
                    </tr>
                    <tr>
                        <td width="1%" background=" box_left.gif">
                        </td>
                        <td width="98%">
                            <table class="feature_large" cellpadding="0" cellspacing="0">
                                <tr class="feature_large_title">
                                    <td rowspan="3" class="feature_large_image">
                                        <a target="_self" href="ResultsEvent.aspx?event=An+Event">
                                            <img class="feature_large_image" alt="Alt Text" src="anImage.jpg"></img></a>
                                    </td>
                                    <td class="feature_large_title">
                                        <a target="_self" href="ResultsEvent.aspx?event=An+Event">The Event</a><br />
                                        <img class="feature_large_title" src="feature_large_title.gif" />
                                    </td>
                                </tr>
                                <tr class="feature_large_text">
                                    <td class="feature_large_text">
                                    </td>
                                </tr>
                                <tr class="feature_large_buynow">
                                    <td class="feature_large_buynow">
                                        <a target="_self" href="ResultsEvent.aspx?event=An+Event">
                                            <img alt="Buy Now" src="feature_large.gif" class="feature_large" /></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td width="1%" background="box_right.gif">
                        </td>
                    </tr>
                    <tr>
                        <td width="1%">
                            <img src="box_bottomleft.gif" border="0" />
                        </td>
                        <td width="98%" background=" box_bottom.gif">
                        </td>
                        <td width="1%">
                            <img src="box_bottomright.gif" border="0" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

（更新）正如许多人指出的那样，JavaScript 存在问题。我找到了一个 CSS/html 解决方法。谢谢。

【问题讨论】：

因此，Web 开发的基本经验法则：首先使用 HTML，然后使用 CSS，如果您不能用这些实现您想要的，那么请使用 JavaScript。遵循这条规则几乎总是会产生更好的网站。我想说，如果你不能改变 HTML 本身，你可能根本不应该这样做。
为什么要更换表格？不要破坏什么是正确的？

标签： javascript jquery dom tags html-table

【解决方案1】：

即使你确实得到了一些工作，我想客户端上的页面加载会很慢，尤其是在旧版浏览器上，因为它会在页面加载时进行大量的 DOM 操作。

即使通过在源代码处手动重写 HTML 来完成这项任务也是一个 PITA。以编程方式进行并编写涵盖所有各种表格布局（有效或无效 HTML）的通用内容将是一场噩梦。

对于一个简单的示例，您可能会很快启动并运行一些东西，但是将其扩展为一个完整的网站会非常痛苦。

【讨论】：