javascript - 如何加载外部 HTML 内容以供此 JS 代码操作？

Question

在另一个用户的帮助下，我有了以下 JSFiddle，它查看表格并删除我不需要的列。

http://jsfiddle.net/9qme9/

我想做的是从外部文件加载 HTML（实际上是一个 aspx 文件），而不是在同一页面上操作 HTML - 就像上面的链接一样。

我正在离线/客户端执行此操作，因此 PHP 是不可能的，并且 aspx 文件与我的页面不在同一位置。

我是初学者，因此非常感谢 JSFiddle 示例。

非常感谢

Answer 1

您可以使用

 $("#elem").load("url.aspx");

其中 #elem 是要放置外部 url 内容的 HTML 元素的 id

检查这个例如：http: //jsfiddle.net/9qme9/5/

Answer 2

在将过滤后的表附加到页面之前，我建议以下内容，其中包含先前用于过滤掉您不想要的列的答案：

$(document).ready(function() {

    //define which column headers to keep
    $("#gvRealtime")
        .load("http://fiddle.jshell.net/UqZjt/show/", function(response, status, xhr){
            var html = $(response),
                table = html.find('#gvRealtime'),
                headersToKeep = ['---', 'C6', 'C7', 'C13', 'C14'],
                colsToKeep = [],
                ths = table.find('th');

            $.each(headersToKeep, function(i, v) {
                //finds each header and adds its index to the colsToKeep
                colsToKeep.push(ths.filter(function() {
                    return $(this).text() == v;
                }).index());
            });

            //makes a new jQuery object containing only the headers/cells not present in the colsToKeep
            $('th, td', '#gvRealtime, #gvTotal').filter(function() {
                return $.inArray($(this).index(), colsToKeep) == -1;
            }).hide(); //and hides them
        });

});

JS 小提琴演示。