はじめに
はじめてjQueryを使う機会があり、表アイテムを使った便利な機能を実装してみたところ、
すごく苦戦したので備忘録の為に記録します。
前提
・jQueryの基礎(セレクタの扱い方程度)を理解している
・HTMLの表中にあるアイテムを使ってあれこれしたい人
やりたいこと
・TDの中にあるアイテムを押下した際に以下のイベントを起こす
-ボタンと同じ行を黄色に着色する
-選択行のテキストを変数で受け取り、アラート表示する
-選択行のテキストを別の値に置き換える
覚えておきたい記述
find()を用いることで、以前の要素の下の階層でさらにセレクタを指定することができます。今回の機能を実装する上で重要な記述となるので覚えておきましょう。
例):
<input type="text" name="hoge" value="hogehoge~" />
<input type="text" name="fuga" value="fugafuga~" size="20" />
<input type="text" name="fuga" value="funga~funga~" size="30" />
function getInfo(){
// nameがhogeのアイテムのvalue値
var a = $('input:text[name="hoge"]').val();
// nameがfugaかつsizeが30のテキストのvalue値
var b = $('input:text[name="fuga"]').find('[size="30"]').val();
// "hogehoge~"を出力
console.log(a);
// "funga~funga~"を出力
console.log(b);
}
このようにnameが"fuga"のテキストアイテムが複数ある場合、他の属性をfind()によってさらに指定することで、絞り込みをかけていくことができます。
これを利用し、テーブル内のボタンを利用したイベントを作成してみます。
表にボタンを配置(HTML,CSS)
HTMLにてイベント発火用のボタンと、アラート表示用のリンクを含めたテーブルを作成します。
<HTML>
<HEAD>
<SCRIPT src="ui/libs/jQuery-1.7.1.js"></SCRIPT>
<TITLE>2020年最新のゲーム機</TITLE>
</HEAD>
<BODY>
<TABLE name="tblGameList">
<!-- ヘッダの行 -->
<TR>
<TD>選択</TD>
<TD>商品ID</TD>
<TD>商品名</TD>
<TD>発売元</TD>
<TD>イベント</TD>
</TR>
<!-- データの行 -->
<TR>
<TD><input type="button" name="sel_event" value="回" /></TD>
<TD>P00001</TD>
<TD>
<input type="text" name="game" value="プレイステーション4" readonly />
</TD>
<TD>SIE</TD>
<TD><a name="event" alt="アラートを表示">アラート表示</a></TD>
</TR>
<TR>
<TD><input type="button" name="sel_event" value="回" /></TD>
<TD>P00002</TD>
<TD><input type="text" name="game" value="Nintendo Switch" readonly />
</TD>
<TD>任天堂</TD>
<TD><a name="event" alt="アラートを表示">アラート表示</a></TD>
</TR>
<TR>
<TD><input type="button" name="sel_event" value="回" /></TD>
<TD>P00003</TD>
<TD><input type="text" name="game" value="Xbox Series X" readonly />
</TD>
<TD>マイクロソフト</TD>
<TD><a name="event" alt="アラートを表示">アラート表示</a></TD>
</TR>
</TABLE>
</BODY>
</HTML>
input[type="text"]{
background-color:white;
border:none;
}
.changeColor{
background-color:"yellow";
}
「選択」列のボタン押下で選択行の背景色を変更する
背景色を変更するには、addClass()を使用し、クラスの追加を行うことができます。
元に戻す場合はremoveClass()でクラスを削除します。
また、ボタンを押下するたびに背景色をON←→OFFのように切り替えたいので、toggle()を使用しています。
// name="sel_event"のボタン押下時イベント
$(function(){
var rowInfo = $(this).closest('tr');
$('input:button[name="sel_event"]').toggle(
// 奇数回ボタンを押した時に処理します
function(){
rowInfo.addClass('changeColor');
},
// 偶数回ボタンを押した時に処理します
function(){
rowInfo.removeClass('changeColor');
}
);
});
リンク押下で行の情報をアラート表示する
$('a[name="al_event"]').on('click',function(){
// 行情報の取得
var rowInfo = $(this).closest('tr');
var gameName = rowInfo.find('[name="game"]').val();
// 選択行のアラート表示
alert(gameName);
});
ボタン押下で値の上書きをする
.val()を使用して値を上書きすることができる。
$('a[name="al_event"]').on('click',function(){
var newValue = "プレイステーション5";
// 行情報の取得
var rowInfo = $(this).closest('tr');
rowInfo.find('[name="game"]').val(newValue);
});
ここでは本題とは関係ないため、上書きする情報をハードコーディングで指定していますが、実際に実装する際は非同期処理でDBにアクセスして取得した情報を変数に代入するのがよさげです。
おわりに
ここで紹介したソースは自分が実際に実装したソースを基にしていますが、回りくどいやり方をしているなど改良の余地があると思います。
こんなやり方の方がいいよっていうのがあれば、ご教授いただければ幸いです。