jquery 重新加载 table (IE 7)

Question

我这里有一个 HTML-代码：

<div id="overview" class="fadeable">
    <table id="exportTable">
        <tr>
            <td style="width: 500px;"><strong>Col 1</strong></td>
            <td style="width: 15px;" class="aligned_td"><strong>Col 2</strong></td>
        </tr>
    <% call getLocationPercentages(is_nll) %>
    </table>
</div>

如您所见，我在第一个 tr 之后调用了一个 asp 函数。它生成的输出是正确的（重新加载站点后。但是，我不想重新加载它。

对于这种情况，我制作了一个小的 JS 函数，它在 Chrome 中有效，但在 IE (7) 中无效。快速说明：我不能不支持 IE 7。

$(document).on("click", "#updateLocation", function() {
    $.ajax({
        url: "my-file.asp",
        type: "GET",
        scriptCharset: "utf-8",
        cache: false,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data: data
    });

    $('#exportTable').load(location.href + " #exportTable");

}

我阅读了 load 的文档，正如我所说，它适用于 chrome。然而 IE 只是 "hides" 的输出。提交后（或按下此按钮（在另一个 div 中，如果这很重要））table 就消失了，但 dom 是正确的。 ~~没有 CSS 规则或任何可以隐藏 table 的规则。它也会影响其他浏览器。~~

The DOM after submitting also has the correct values (so it is "reloaded", but not displayed)

想法？熟悉那个问题吗？

更新

我发现 Table 没有正确生成。我的 HTML 结果是这样的：

<table id="exportTable">
    <table id="exportTable">
        correct content here
    </table>
</table>

当我将内部 table 移到另一个上面时，它又是单独的，显示是正确的。出于某种原因，它没有重新生成内容，而是添加了另一个 table。

我尝试用这个 "unwrap" 第二次出现，但没有成功：

var e = $('#exportTable:last');
e.prev().insertAfter(e);

里面的table没有被选中，它只影响外面的

e.unwrap()

也没做过

我什至无法在循环中使用 each 到达它。它只是被抛在后面。

Answer 1

我不知道为什么，但是 "reloading" 一个 table 最终有 2 个 table 具有相同的类 + id，其中第一个只是第二个的包装。

我在 table 周围包裹了一个 <div>，更改了我的 JS 以重新加载 div，现在它可以正常工作了。

HTML

<div id="tableWrap">
    <table id="exportTable" class="exportTable">
        <tr>
            <td style="width: 500px;"><strong>col 1</strong></td>
            <td style="width: 15px;" class="aligned_td"><strong>col 2</strong></td>                                                                                  
       </tr>                                                                                 
       <% call getLocationPercentages(is_nll) %>
    </table>
</div>

JS

$('#tableWrap').load(location.href + " #exportTable");

Answer 2

我不确定你这样做的方式是否正确或者你真正想要达到什么目的。

首先 - 当您创建 HTML table 时，您应该像这样创建它：

<table>
   <thead>
        <tr>
            <!-- columns descriptions here -->
        </tr>
   </thead>
   <tbody id="ContentId">

   </tbody>
</table>

并且只更新 tbody 元素。

其次，在第一次启动应用程序时，您应该使用 ASP.NET 呈现数据，但是随后（如果您想将 AJAX 与 jQuery 一起使用）最简单（但不是最好的） ) 更新该数据的方式是：

JS

$("#UpdateTBody").on("click", function () {
    $.ajax({
          url : "script.asp",
          ...,
          success: redrawTBody
    });

    // let's say success callback receives HTML in data argument
    function redrawTBody (data) {
        // disclaimer : this is simple, but not the best way 
        // drawing table
        $("ContentId").html(data);
    }
});

HTML 由 script.asp

返回

<tr> <!-- row 1 --> </tr>
<!-- following rows -->

关于更改 URL 更好的方法是使用 location.assign( location.href + '#ContentId' ) 或location.hash="ContentId"

jquery 重新加载 table (IE 7)

jquery reload table (IE 7)

javascript

css

ajax

jquery

asp-classic