テーブルを自動生成し行にクリック属性を持たせる

javascript/jQuery

はじめに

DreamHanksの松下です。

ajaxを用いてテーブルをjQueryで自動生成しました。
その自動生成したテーブルの行をクリックしたときにonclickイベントを実行するやり方をご紹介します。

連載記事まとめ

 

動的にjQueryでテーブルを生成する

1行目:ajaxを用いてサーバーからList配列のデータ構造のレスポンスを取得します。

5行目:List配列のレスポンスの行分処理を行う。

8行目:
$(“#bodyTableInfo”) = bodyタグのIDでhtml要素にアクセスする。
.append($(‘<tr>’) = trタグをbodyタグに付属させる。

9行目:tdタグ内にinputタグでチェックボックスを付属し、それをtrタグに付属する。

10~14行目:
tdタグ内に各種行のカラム値をテキストで付属し、それをtrタグに付属する。

 

動的にテーブル行にクリックイベントを付属させる

16行目:$(‘#bodyTableInfo tr’).on(‘click’, function(){
$(“#bodyTableInfo tr”) = bodyタグのtrタグにアクセスする。
.on() = イベントを付属させる
第一引数 = イベント
第二引数 = 関数

イベントの種類

イベント名 内容
change フォーム部品の状態に何らかの変化があった時に発動
click 要素がクリックされた時に発動
blur / focus 要素にフォーカスが当たったとき(focus)、外れたとき(blur)に発動
load ドキュメントが読み込まれたあとに発動
resize ウィンドウサイズが変化した時に発動
scroll 画面がスクロールした時に発動
keyup / keypress キーボードのキーが押された時(keypress)、離された時(keyup)に発動
mouseup / mousedown マウスのボタンが押された時(mousedown)、離された時(mouseup)に発動
mousemove 指定の要素内でマウスが動いている時に発動
submit フォームが送信された時に発動
error 何らかのJavaScriptエラーが発生した時に発動

 

17行目:var stampEventId = $(this).children().text()[0];
$(this) = trタグ
.children() = tdタグ(複数)
.text()[0]; = tdタグのtext要素の0番目 = stampEventId

18~19行目:
inputタグをbodyタグに付属させる
1つ目のinputタグのvalue値をメソッドの外にあるidentificationNumから取得し代入
2つ目のinputタグのvalue値を17行目で取得したstampEventIdを代入

20行目:サブミットしサーバーに値を渡す。

 

 

静的にテーブル行にクリックイベントを付属させる

前提条件として、動的にテーブルを生成します。
1カラム目にinputタグでclass属性をcheckという名前でチェックボックスを生成します。

6行目: $(“input[class=’check’]”).click(function(i) {
jQueryを使ってinputタグのclassの名前がcheckのものにアクセスする。
.click(関数) = クリックした場合に中の関数を発動させる。

7行目:if($(this).is(“:checked”)){
ifで分岐処理を行います。その条件がthis(チェックボックス)がチェックされている場合
中の処理を行います。

8行目:var tr = $(this).parents(‘tr’);
チェックボックスの上の階層のhtmlタグであるtrタグを変数に取得する。

9行目:var td = tr.children();
tdタグの下の階層にあるtrタグ全てを取得する。
わざわざ3行目でparentsメソッドを使った理由はこのようにDOMツリーを1階層上り
1階層したの全てのtrタグを取得するため

10行目:checkedList.push(td.eq(1).text());
checkedList.push() =
1行目で定義している配列にpushメソッドで()内の値を詰め込んでいく。

td.eq(1).text() = tdタグの2番目のtextにアクセスする。

「eq()」は、複数のHTML要素の中からインデックス番号を指定することで特定の要素だけを取得できます。

 

11行目:$(“#checkedList”).val(checkedList);
10行目で値を詰めたcheckedListをcheckedListというIDを持つinputタグにvalue値を詰めます。

12行目:$(“#identificationNumber”).val(identificationNum);
identificationNumも11行目と同じように、inputタグに詰めます。

 

最後にサブミットボタンを押下することでサーバーに値を渡します。

 

よく間違うポイント

ajaxのthen{}の外にオンクリック属性を定義してしまう。

thenの外に定義した場合、どこからも使われないソースコードになってしまいます。
よって動的に作ったテーブル行にクリック属性を付けることができません。

 

値を取得する場所を間違える

下記の2つのソースコードはやりたいことは同じです。

しかし、アクセスする概念に違いがあります。

1つ目の$(this).children().text()[0]は、trの子供のtdのテキストの1つ目という意味です。
今回のテーブルでは1カラム目はinputタグのチェックボックスとなっております。
テキストの1つ目ということはinputタグはテキストではないので、今回概念的に飛ばされます。
なので、.text()[0]で取得したいカラムが取れます

 

2つ目のtd.eq(1).text()はtdタグの2つ目のテキストというアクセスの仕方をしています。
なのでこのアクセス方法だとinputタグも含めて数えられるのでeq(1).text()という風に書きます。
※これをeq(0).textとした場合にinputタグにtext要素がないので、画面でエラーになります。

 

 

 

コメント