2

5列のテーブルがあります。ここでは 1 行のみを表示します。

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

5 つのクローン テーブルを作成したいのですが、各クローンでは、元のテーブルの 1 つの列だけを保持する必要があります。

<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

文字列を連結する必要があり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>

ジャバスクリプト:

$(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 に答える