jqueryはselected_jqueryの際にラジオボタンによるテーブル行の強調表示を実装します。

前回のブログ投稿はチェック ボックスについてでしたが、今回はラジオ ボタンについてです。クエリ時に、選択したレコードの行が 1 つだけ選択できる場合、その行の 1 つのボタンも表示されます。選択ボタンも選択され、ユーザー エクスペリエンスが向上します。現代はユーザーエクスペリエンスの時代です。

効果は次のとおりです:
CSS ファイルは次のとおりです:

コードをコピーしますコードは次のとおりです:

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

今回はjs ファイルのコードは、以下に示すようにさらに単純になります。

コードをコピーします コードは次のとおりです:

/**
* ラジオボタンを含むテーブルの背景色を設定します
*/
$(document).ready(function()
{
/**
* 表をクリックしたときに背景色を変更します
*/
$("#tablight tr :gt(0)").click (function() //Get
{
$(this).addClass("selected").siblings().removeClass("selected").end(). find(" :radio").attr("checked",true);
})
});

コードを有効にするには、次のようにする必要があります。 id 属性をテーブルに追加します。属性値は「tablight」です。これが完了したら、使用するときにこれら 2 つのファイルを参照するだけです。