javascript - IE9 - 使用 jQuery 将 html 表加载到页面中

Question

我构建了一个非常简单的示例，通过ajax从另一个html页面将表格加载到页面中，它在所有浏览器中都可以正常工作，除了IE9，它似乎嵌套表格。此处不能选择用 div 替换 table 。解决方法是什么？(我使用的是jquery-1.8.1)

这是我的代码:索引.html

<table id="table_id">
        <thead>
            <tr>
                <th>Sort Column 1</th>
                <th>Sort Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>
 <button>load new data</button>

  <script type="text/javascript">
    $(document).ready(function () {
        var tbl = $('#table_id');

        $("button").on("click", function () {
            var xhr = $.ajax("table.html")
                     .done(function (data) {
                         tbl.html(data);
                     });
        });
    });

</script>  

表.html

<table id="table_id">
        <thead>
            <tr>
                <th>Sort Heading 1</th>
                <th>Sort Heading 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 New Data 11</td>
                <td>Row 1 New Data 22</td>
            </tr>
            <tr>
                <td>Row 2 New Data 11</td>
                <td>Row 2 New Data 22</td>
            </tr>
        </tbody>
    </table>

Answer 1

您可以使用.replaceWith

$('#table_id').replaceWith(data);

因为 .html 替换了内部内容。在我们的例子中，使用 .html table 后看起来像这样

<table id="table_id">
   <table id="table_id">
      ... 
   </table>
</table>