row_jquery をクリックして HTML テーブルの行を削除する jQuery 実装例

jQuery は、これまでで最も使用され、お気に入りの JavaScript フレームワークの 1 つになりました。これにより、JavaScript でのコーディングに伴う単純な技術的オーバーヘッドが削減されるだけでなく、コードのクロスブラウザー互換性も確保されます。私は jQuery に関する多くのチュートリアルを書いてきましたが、このときもこの単純な純粋な実装を使用しました。このタスクは、行の行をクリックするだけで、HTML テーブルからいくつかのファンキーな効果を使用することです。以下はこれを実現するための jQuery コードです。

$(document).ready(function() {
$("#sample tr").click(function() {
//change the background color to red before removing
$(this).css("background-color","#FF3700"); 
$(this).fadeOut(400, function(){ 
$(this).remove();
});
});
});

上記のコードでは、「#example」テーブル内のすべての「TR」にハンドラーをアタッチしました。それをクリックすると、最初に行の背景が変更され、次にフェードアウトして削除されます。これは簡単な作業です。