2

私はテーブルを持っています

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="activity_tab">
    <tr id="list_1">
        <td><span class="new_act">Folder files Created</span>
        </td>
        <td>2013-06-24 02:11 am</td>
    </tr>
    <tr id="list_2">
        <td><span class="new_act">Folder ss Created</span>
        </td>`enter code here`
        <td>2013-06-24 02:11 am</td>
    </tr>

選択したクラスをその行に追加したい行をクリックすると、その動的テーブルデータが実行時に表示されます。その後、ページの上部にハイパーリンクがあります 

 <li><a href="javascript:void(0);" class="delete">Delete</a></li>

これは私のハイパーリンクです。ハイパーリンクをクリックすると、選択した行が削除されます。選択した行を取得するにはどうすればよいですか。その削除についてはすべて考えていますが、解決策が見つかりませんでした...

4

4 に答える 4

3

あなたはこれを行うことができます -

$('.activity_tab tr').on('click',function(){
  $(this).addClass('selected');
});
$('.delete').on('click',function(){
   $('tr.selected').remove();
});
于 2013-06-24T11:43:19.297 に答える
2

選択した行にクラスを追加します。一度に 1 つの行しか選択できないと想定しているため、新しい行がクリックされたときに選択を削除する必要があります。

テーブルは動的であるため、委任されたイベント リスナーを使用して、選択したクラスを追加する必要があります。委任されたイベントの詳細については、 jQuery の on() メソッドのドキュメントを参照してください。

$(document).on('click', 'tr', function(e) {
    $('tr.selected').removeClass('selected'); //clear other selections
    $(this).addClass('selected'); //mark this row as selected
});

$('a.delete').on('click', function(e){
   e.preventDefault(); //stop native link behavior
   $('tr.selected').remove(); //remove selected row
});

selectedクラスを行に追加するリスナーはtr、ドキュメント内のすべての要素に影響を与えることに注意してください。ページに他のテーブルがある場合は、2 番目のセレクター (「クリック」の後) をより具体的にする必要があります。

于 2013-06-24T11:44:07.563 に答える
1

これを試すことができます

$(function(){
    $(".activity_tab tr").click(function(){
        $(this).addClass("red");
    });

    $('.delete').on('click',function(){
       $('tr.red').remove();
    });
});

デモ: http://jsfiddle.net/YNNVr/

于 2013-06-24T11:49:16.310 に答える
0

次のコードをクリックすると、selectedクラスを追加できます。tr

$('.activity_tab').on('click', 'tr', function(){
   $(this).addClass('selected');
});

さらに一歩進めたい場合は、toggleClassの代わりに を使用できるため、をもう一度クリックするだけでクラスをaddClass削除できます。selectedtr

その後、すべてのselected行を選択して削除できます

$('.delete').on('click', function(){
   $('activity_tab .selected').remove();
});

selectedこれにより、クラスを含むテーブル内のクラスを含むすべての行が削除されますactivity_tab。

于 2013-06-24T11:50:05.907 に答える