使用jquery将表拉入iframe

时间:2013-03-09 13:25:07

标签: javascript jquery

你昨天问了一个类似的问题,但现在就这样了。

首先:所有数据都在我的域名上。所有数据都在同一个域中。加载iframe位于同一个域中。谢谢。

供参考..表名是dactable,div名是tablediv(如果你想写一些新东西和我能理解的标签)。

现在是我用来拉桌子的代码。

$(window).on('load', function() // wait for load event, so the iframe is fully loaded in
{
  var $iframe = $('iframe'); // assuming only one?  You need to target the right iframe, perahps with iframe[src="/top_list.html"] if that's your only option

  var $contents = $iframe.contents();
  var $main = $contents.find('.main');
  var $tbl = $main.next(); // now we have the table

  $contents.find('*').hide(); // hide everything
  $tbl.show(); // show table and...

  var $parent = $tbl.parent(); // get/show all parents of the tbl

  while($parent.length)
  {
     $parent.show(); // show parent
     $parent = $parent.parent(); // move up the hierarchy
  }
});

现在我还需要删除某些列。但似乎不能让它做更多的工作。

它如何知道要定位的表格?

$('table tr').each(
    function(tr_idx,el){
        $(el).children('td').each(
            function(td_idx,el2){
                //i'm removing first columns..
                if(td_idx == 0){
                    el2.remove();
                }
        });//inner each
});//outer each

谢谢

2 个答案:

答案 0 :(得分:1)

尝试使用此代码按索引删除行和列。

var removeRows(table, rows){
    // mark a row, which should be removed
    $('tr', table).each(function(tr_idx){
        if(rows.indexOf(tr_idx) !== -1){
            // rows contains tr_idx
            $(this).attr("remove");
        }
    });
    // remove marked rows
    $('tr[remove]', table).remove();
},
removeColumns(table, columns){
    // mark a column, which should be removed
    $('tr', table).each(function(tr_idx){
        $('td', this).each(function(td_idx){
            if(columns.indexOf(td_idx) !== -1){
                // columns contains td_idx
                $(this).attr("remove");
            }
        };
    });
    // remove marked columns
    $('td[remove]', table).remove();
};

...
var table = $(something);

// remove rows with indexes 1, 2 and 3
removeRows(table, [1, 2, 3]); 

// remove columns with indexes 0 and 3
removeColumns(table, [0, 3]); 

答案 1 :(得分:1)

使用jQuery的.load()将您想要的html加载到您选择的div中。您甚至可以通过指定在URL后面提供#id

来选择要加载的html部分
$(function () {

    $('#result').load('/top_list.html #table-id', function () {

        $('#result table tr').each() {
              //remove first td of each row
              $(this).children('td').first().remove();
        });

    });

});

就这么简单。它有助于一切都在同一个域上


为了使这一点更清楚,我们假设你有下表

<table id="table-id">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

删除每行的第一个单元格,并将结果放在div

<div id="result">
    <table id="table-id">
        <tr>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</div>