如何加载要由此JS代码处理的外部HTML内容? [英] How do I load external HTML content to be manipulated by this JS code?

问题描述

在另一个用户的帮助下，我得到了下面的JSFiddle，它查看一个表并切出我不需要的列.

Through the help of another user I have the following JSFiddle that looks at a table and cuts out columns I don't need.

http://jsfiddle.net/9qme9/

我想做的是从外部文件加载HTML(实际上是aspx文件)，而不是在同一页面上处理HTML，就像上面的链接一样.

What I would like to do is load the HTML (which is actually an aspx file) from an external file instead of manipulating the HTML on the same page - as is the case of the above link.

我正在离线/客户端执行此操作，因此无法使用PHP，aspx文件与 my 页面不在同一位置.

I am doing this offline/client-side so PHP is out of the question and the aspx file is not in the same location as my page.

我是一个初学者，因此非常感谢JSFiddle示例.

I'm a beginner so a JSFiddle example would be much appreciated.

非常感谢

推荐答案

我建议以下内容，其中合并了先前的答案，用于将不需要的列过滤掉，然后再将过滤后的表格附加到页面上:

I'd suggest the following, which incorporates the previous answer for filtering out the columns you don't want, before appending the filtered-table to the page:

$(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小提琴演示.

这篇关于如何加载要由此JS代码处理的外部HTML内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！