Question

我在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解决方法。感谢。

Answer 1

即使你确实得到了一些工作，我也会想象客户端上的页面加载速度会非常慢，特别是在较旧的浏览器上，因为它会在页面加载时进行大量的DOM操作。

即使通过在源处手动重写HTML来执行此任务也是PITA。以编程方式执行并编写可覆盖所有各种表格布局（有效或无效的HTML）的通用内容将是一场噩梦。

对于一个简单的例子，你可能会很快得到一些东西并且很快就会运行，但是将它扩展到一个完整的站点会非常痛苦。

我正在尝试使用jQuery / JavaScript用<div>标签替换所有，和<table> <tbody> <tr> <td>标签</div> </td> </tr> </tbody> </表>

1 个答案: