18

以下は私のコードです

脚本

$(document).ready(function(){
    $('#click').click(function(){
        $('#table').append('<tr><td>&nbsp;</td></tr>');
    })
    $('#remove').click(function(){
        $('#table').remove('<tr><td>&nbsp;</td></tr>');
    })
})

HTML

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="table">
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
<div id="click">click</div>
<div id="remove">remove</div>

行を追加するとうまくいきますが、テーブルの最後の行を削除する方法がわかりません。オンラインデモもご覧いただけます。

これどうやってするの？

さらに、ユーザーが任意の行をクリックすると、それ自体が削除されます。試してみましたが、問題があります。行をクリックするとそれ自体が削除されますが、#click をクリックして行を追加すると、行をクリックしても削除されません。

これが私のコードです：

脚本

$(document).ready(function(){
    $('#click').click(function(){
        $('#table').append('<tr><td>&nbsp;</td></tr>');
    })
    $('#remove').click(function(){
        $('#table tr:last').remove();
    })
    $('#table tr').click(function(){
        $(this).remove();
    });
})
4

6 に答える 6

33

の最後のテーブル行を削除したい場合は#table、セレクターでそれをターゲットにしてから、それ$.remove()に対して呼び出す必要があります。

$('#remove').on("click", function(){
    $('#table tr:last').remove();
})
于 2012-05-19T05:54:36.863 に答える
5

そのように削除することはできません。削除するノードを指定して削除する必要があり$('#table tr:first')ます remove() 

$('#remove').click(function(){
    $('#table tr:first').remove();
})

http://jsfiddle.net/2mZnR/1/

于 2012-05-19T05:54:50.777 に答える
2

デモはhttp://jsfiddle.net/BfKSa/にあります。 または、すべての行をバインド、追加、および削除する場合は、この別のデモ http://jsfiddle.net/xuM4N/が便利です。

API: 削除 => http://api.jquery.com/remove/

あなたが言ったように：これは「テーブルの最後の行を削除する」を削除します

$('#table tr:last').remove();あなたのケースのトリックを行います。

コード

$(document).ready(function(){
    $('#click').click(function(){
        $('#table').append('<tr><td>foo add&nbsp;</td></tr>');
    })
    $('#remove').click(function(){
        $('#table tr:last').remove();
    })
})
于 2012-05-19T06:03:51.337 に答える
1

trボタンクリックでテーブルクラスを使用して、テーブルから最後を削除できます。

$('#remove').on("click", function(){
    $('.tbl tr:last').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" width="100%" border="1" cellspacing="0" cellpadding="0" >
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
<button id="remove">remove</button>

于 2016-07-13T08:14:04.730 に答える
0

テーブル行をクリックしたときに行自体を削除したい場合は、

$('table tr').on("click", function(){
    $(this).remove();
});

テーブルの最後にあるクリックボタンのクリックで行を追加したい場合

 $('#click').click(function(){
    $('#table').append('<tr><td>Xyz</td></tr>');
})
于 2016-07-13T10:06:24.990 に答える
0

セレクターで最後の行を見つけ、その行を次のように削除します。

$('#table > tr:last').remove();

これにより、テーブルの最後の行が削除されます。最初のものを削除したい場合はどうしますか？

$('#table > tr:first').remove();

それでおしまい。jQuery の codeschool オンライン コースがあります。そこには、セレクターや DOM 操作など、多くの貴重なものがあります。ここにリンクがあります：http://jqueryair.com/

于 2012-05-19T05:57:11.730 に答える