2

我有一个有 5 列的表。我在这里只显示一行：

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</TR>
</table>

我想创建 5 个克隆表，但在每个克隆中我只需要保留原始表的一列。

<table>
<tr>
    <td>1</td>
</TR>
</table>

<table>
<tr>
    <td>2</td>
</TR>
</table>

<table>
<tr>
    <td>3</td>
</TR>
</table>

etc...

这是我到目前为止所得到的：

for ( var i = 0; i < 5- 1; i++ ) {
    $('table:first').clone().insertAfter('table');
    $('table:last tr td:not(:nth-child(i))').remove();
}

我遇到的问题是在这一行：

$('table:last tr td:not(:nth-child(i))').remove();

如何删除除此列之外的所有列？

4

3 回答 3

1

像这样？

$('table').after($('table').find('tr:first td').map(function (i) {
     return $(this).closest('table').clone().find('td').not(':nth-child(' + (i+1) + ')').remove().end().end();
}).get());

演示

如果您有多个表，这将最适合：

$('table').after(function () {
    return $(this).find('tr:first td').map(function (i) { //iterate through td of first tr
        return $(this)
               .closest('table').clone() //get the parent table and clone it
               .find('td').not(':nth-child(' + (i + 1) + ')') //select all td that are not in this index
               .remove() //remove all the previously selected tds from cloned table
               .end().end(); //back to the table
    }).get(); 
});

演示

于 2013-10-21T21:46:40.200 回答
1

您应该连接字符串，i在您的代码中是字符串的一个字符，它不引用任何变量，它应该是：

$('table:last tr td:not(:nth-child('+i+'))');

尝试这个：

var $tbl = $('table:first');

for ( var i = 0; i < $tbl.find('td').length; i++ ) {
    $tbl.clone()
        .find('td')
        .not(':eq('+i+')')
        .remove()
        .end()
        .end()
        .insertAfter('table:last');
}

http://jsfiddle.net/v47GY/

于 2013-10-21T21:48:57.663 回答
1

稍微改变你的 html 和 javascript 以使用 id 来简化选择：

HTML：

   <div id="wrapper">
    <table id="my-table">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
</div>

JAVASCRIPT：

$(function(){
    $.each($('#my-table td'),function(index,ele){
        $('#wrapper').append('<table><tr><td>'+$(ele).html()+'</td></tr></table>');
    });
    $('#my-table').remove();
});

工作示例：http: //jsfiddle.net/5TT5E/2/

于 2013-10-21T21:49:49.453 回答