Question

我有一个包含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();

如何删除除此列以外的所有内容？

Answer 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());

<强> Demo

如果你有多个表，这将是最好的：

$('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(); 
});

<强> Demo

Answer 2

你应该连接字符串，你的代码中的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/

Answer 3

稍微更改你的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/

通过循环删除表列

3 个答案: