jqueryを使用してチェックボックス付きのテーブルを実装する手順の詳細な説明

今回は、jqueryでチェックボックスを使用したテーブルを実装する手順について詳しく説明します。 以下は、jqueryでチェックボックスを使用したテーブルを実装するための注意事項とは何ですか? 。

jquery テクノロジーを使用してテーブルを操作するのは簡単です。jquery の構文を使用すると、テーブルの色を 1 行おきに変更したり、強調表示を一時停止したりできます。実際のアプリケーションでは、テーブルにチェック ボックスが存在する場合があります。削除の場合は、チェックボックスのある行のレコードを削除します。ここで、行をクリックすると、その行のチェック ボックスがオンになり、その行の背景色も強調表示されます。これはとても良い感じです。

効果は次のとおりです:

ここでは 2 つの関数があります:
機能 1. 行をクリックすると、その行のチェック ボックスが選択され、同時に背景色が変更されます。
機能 2. [すべて選択]/[すべて選択解除]ラベルをクリックした後の行の色を変更します。
2 つの関数を js ファイルにカプセル化し、使用するときにインポートするだけです。
まず CSS コードを見てみましょう。CSS ファイルにカプセル化しました

.selected{ 
background
:#FF6500; 
color:#fff; 
}

js ファイルのコードを見てみましょう:

関数 1 のコード:

/** 
* 设置含有复选框的表格中的背景色 
*/ 
$(
document
).ready(function() 
{ 
/** 
* 表格行被单击的时候改变背景色 
*/ 
$("#tablight tr:gt(0)").click(function() //获取第2行后 
{ 
if ($(this).hasClass("selected"))//判断是否选中 
{ 
$(this).removeClass("selected").find(":checkbox").attr("checked",false);//选中移除样式 
} 
else//设置选中 
{ 
$(this).addClass("selected").find(":checkbox").attr("checked",true);//未选中添加样式 
} 
}); 
});

関数 2 のコード:

/** 
* 单击全选和反选之后改变背景色 
*/ 
function setColor()//设置tr的背景颜色 
{ 
var checkboxs = $("#tablight tr:gt(0) input[type=checkbox]");//得到所有的复选框 
var boxeds = $("#tablight tr:gt(0) input[type=checkbox]:checked");//得到被选择的复选框 
if(boxeds.length > 0) 
{ 
checkboxs.parent().parent().addClass("selected");//复选框在td里 
} 
else 
{ 
checkboxs.parent().parent().removeClass("selected"); 
} 
}

コードを有効にするには、テーブルに id 属性を追加し、属性値を「tablight」にし、すべてを同時に選択/選択解除してから、setColor メソッドを呼び出す必要があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSON.parse() と JSON.stringify() の違いとその使い方の詳細な説明

JS が json を判断する方法とは何ですか

以上がjqueryを使用してチェックボックス付きのテーブルを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。