javascript / jqueryを使ってテーブル行を削除する

javascript jquery

これは機能していません。 Firebugはエラーを投げていません。

HTML:

BookA

javascript:deleteRow($(this)); [削除]

BookB

javascript:deleteRow($(this)); [削除]

BookC

javascript:deleteRow($(this)); [削除]

BookD

javascript:deleteRow($(this)); [削除]

Javascript:

関数deleteRow(ref){$(ref).parent()。parent()。remove(); }

可能であれば、インラインJavaScriptのソリューションを使用したいと思います

  2  2


ベストアンサー

まず第一に、インラインJavaScript( + href =" javascript:x "+`または `+ onclick =" x "+)は一般的に悪いです。 インラインJavaScriptを使用すると、イベントオブジェクトにアクセスできなくなり、 `+ this +`が何を参照しているかを本当に確認できなくなります。

jQuery(および他のほとんどすべてのJavaScriptライブラリ/フレームワーク)にはイベント処理が組み込まれています。 そのため、イベントハンドラでは、コードは次のようになります。

$('a.red').click(function(e) {
  e.preventDefault(); // don't follow the link
  $(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
});

そして、ここにデモがあります:http://jsbin.com/okaxu

10


これを試して:

// Bind all the td element a click event
$( 'table td.deleteRow')。(function(){$(this).parent()。remove();});をクリックします。

ところで、それはあなたのHTMLコードからjavascriptを削除します。 このHTMLコードで

BookA

削除する

BookB

削除する

BookC

削除する

BookD

削除する

3


あなたが思うように$(this)はa-タグを参照していないのでこれは機能しません(私はそれがウィンドウオブジェクトか何かを参照していると思います)

href属性でインラインJavaScriptを使用する代わりにこれを行います。

代わりにこれを行います

$( "table a")。(function(){$(this).parent()。parent()。remove();});をクリックします。

1


インラインスクリプトを削除する

$(function(){$( 'table td a')。live( 'click'、function(){$(this).parent( 'tr')。remove(); falseを返す;});});

1


deleteRow関数にバグがあると思います。 これがどのように書かれるべきかです:

関数deleteRow(ref){ref.parent()。parent()。remove(); }

deleteRowに渡している参照はすでにjQueryオブジェクトです。 あなたは$(ref)を使うべきではありません。refはすでにjQueryオブジェクトなのでrefだけを使ってください。

0


インラインJavaScriptは避けるべきであることに同意する必要がありますが、それを使用することが必要または有益であるという他の理由がある場合は、次のようにします。

BookA

リンク:#[削除]

BookB

リンク:#[削除]

BookC

リンク:#[削除]

BookD

リンク:#[削除]

0


タイトルとURLをコピーしました