web-dev-qa-db-ja.com

jQueryを使ってテーブルの行を削除する最善の方法は何ですか？

JQueryでテーブルの行を削除するための最良の方法は何ですか？

javascriptjqueryhtml-table
283
Darryl Hein

あなたが正しい：

$('#myTableRow').remove();

次のように、行にidがある場合、これはうまく機能します。

<tr id="myTableRow"><td>blah</td></tr>

idがない場合は、jQueryの たくさんのセレクター を使用できます。

397
imjoevasquez
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});
97
nickf

あなたがあなたのテーブルのデータセルの中にボタン/リンクがあると仮定すると、このような何かがトリックをするでしょう...

$(".delete").live('click', function(event) {
    $(this).parent().parent().remove();
});

クリックされたボタン/リンクの親の親を削除します。これは通常のDOMオブジェクトではなくjQueryオブジェクトなのでparent（）を使用する必要があります。ボタンはデータセル内にあり、行はセル内にあるため、parent（）を2回使用する必要があります。削除したいもの$（this）はクリックされたボタンなので、このようなものを持っているとボタンだけが削除されます。

$(this).remove();

これによりデータセルが削除されます。

    $(this).parent().remove();

あなたが単にそれを削除するために行のどこかをクリックしたいのであれば、これはうまくいくでしょう。これを簡単に変更してユーザーにプロンプ​​トを表示するか、またはダブルクリックでのみ作業することができます。

$(".delete").live('click', function(event) {
    $(this).parent().remove();
});

それが役立つことを願っています...私はこれに少し苦労しました。

56
sluther

あなたが使用することができます：

$($(this).closest("tr"))

要素の親テーブル行を見つけるために。

それは私がやって始めて、すぐに私の方法の誤りを学んだことであるparent（）。parent（）よりエレガントです。

- 編集 - 問題はその行を削除することであると誰かが指摘しました...

$($(this).closest("tr")).remove()

以下に指摘するように、あなたは単にすることができます：

$(this).closest('tr').remove();

同様のコードスニペットは、複数の要素に対するイベントの発生など、多くの操作に使用できます。

40
Ian Lewis

簡単..これを試してください

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
15
Thurein

次のものは受け入れられます：

$('#myTableRow').remove();
9
Darryl Hein
function removeRow(row) {
    $(row).remove();
}

<tr onmousedown="removeRow(this)"><td>Foo</td></tr>

たぶん、このようなものでもうまくいくでしょうか？私は "this"で何かをしようとしなかったので、それがうまくいくかどうかわからない。

8
Eikern

あなたがしなければならないのはあなたのテーブルからテーブル行（<tr>）タグを削除することです。たとえば、テーブルから最後の行を削除するコードは次のとおりです。

$('#myTable tr:last').remove();

*上記のコードは このjQuery Howto post から取られました。

8
Uzbekjon

サイズはこちら

$(this).parents('tr').first().remove();

全リスト：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $('.deleteRowButton').click(DeleteRow);
      });

    function DeleteRow()
    {
      $(this).parents('tr').first().remove();
    }
  </script>
</head>
<body>
  <table>
    <tr><td>foo</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bar bar</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
    <tr><td>bazmati</td>
     <td><a class="deleteRowButton">delete row</a></td></tr>
  </table>
</body>
</html>

実際に見てください

7
Tim Abell

empty()による別のもの：

$(this).closest('tr').empty();
4
Pichet Thantipiputpinyo

削除したい行が変わる可能性がある場合はこれを使用できます。この関数に削除したい行を渡します。

function removeMyRow(docRowCount){
   $('table tr').eq(docRowCount).remove();
}
2
silvster27
$('tr').click(function()
 {
  $(this).remove();
 });

上のコードはうまくいくので試してみるつもりですが、なぜそれがしばらくの間うまくいくのかわからず、その後テーブル全体が削除されます。行をクリックして行を削除しようとしています。しかし、正確な答えを見つけることができませんでした。

1
Asim Sajjad

私はこれが古い投稿であることを感謝します、しかし私は同じことをやろうとしていて、そして受け入れられた答えが私のために働かなかったことがわかりました。これが書かれてからJQueryが進んだと仮定します。

とにかく、私は以下が私のために働いたのを見つけました：

$('#resultstbl tr[id=nameoftr]').remove();

これが誰かに役立つかどうかわからない。上記の私の例は、より大きな関数の一部だったので、それをイベントリスナでラップしませんでした。

1
SparkyUK2104

このようなHTMLがあるなら

<tr>
 <td><span class="spanUser" userid="123"></span></td>
 <td><span class="spanUser" userid="123"></span></td>
</tr>

userid="123"は、テーブルを構築するときに動的に設定できるカスタム属性です。

あなたはのようなものを使うことができます

  $(".spanUser").live("click", function () {

        var span = $(this);   
        var userid = $(this).attr('userid');

        var currentURL = window.location.protocol + '//' + window.location.Host;
        var url = currentURL + "/Account/DeleteUser/" + userid;

        $.post(url, function (data) {
          if (data) {
                   var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
                   var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
                   trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW 
             } else {
                alert('Sorry, there is some error.');
            }
        }); 

     });

だからその場合あなたはTRタグのクラスやIDを知らないが、とにかくあなたはそれを削除することができる。

1
Developer

ブートストラップテーブルを使用している場合

このコードスニペットをbootstrap_table.jsに追加してください。

BootstrapTable.prototype.removeRow = function (params) {
    if (!params.hasOwnProperty('index')) {
        return;
    }

    var len = this.options.data.length;

    if ((params.index > len) || (params.index < 0)){
        return;
    }

    this.options.data.splice(params.index, 1);

    if (len === this.options.data.length) {
        return;
    }

    this.initSearch();
    this.initPagination();
    this.initBody(true);
};

それであなたのvar allowedMethods = [に

'removeRow'を追加

最後に$("#your-table").bootstrapTable('removeRow',{index:1});を使うことができます

この投稿へのクレジット

0
RickS