jqueryは、選択および削除されたときに強調表示されるチェックボックスを備えたテーブル行を実装します_jquery

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

効果は次のとおりです:

ここには 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 メソッドを呼び出します。