はじめに
DreamHanksの松下です。
ajaxを用いてテーブルをjQueryで自動生成しました。
その自動生成したテーブルの行をクリックしたときにonclickイベントを実行するやり方をご紹介します。
動的にjQueryでテーブルを生成する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
}).then(function(resultList){ var searchResults = resultList.searchResultList; var identificationNum = resultList.identificationNum; var tableColumList = resultList.tableColumList; $.each(searchResults , function(i){ // stampevent table if(identificationNum=="A5"){ $("#bodyTableInfo").append($('<tr>') .append($('<td>', {html : "<input type='checkbox' >"})) .append($('<td>', {text : searchResults[i].stampEventId})) .append($('<td>', {text : searchResults[i].stampId })) .append($('<td>', {text : searchResults[i].eventSpace})) .append($('<td>', {text : searchResults[i].eventContents})) .append($('<td>', {text : searchResults[i].deleteFlg}))); } } }); |
１行目：ajaxを用いてサーバーからList配列のデータ構造のレスポンスを取得します。
５行目：List配列のレスポンスの行分処理を行う。
８行目：
$(“#bodyTableInfo”) ＝ bodyタグのIDでhtml要素にアクセスする。
.append($(‘<tr>’) ＝ trタグをbodyタグに付属させる。
９行目：tdタグ内にinputタグでチェックボックスを付属し、それをtrタグに付属する。
10～14行目：
tdタグ内に各種行のカラム値をテキストで付属し、それをtrタグに付属する。
動的にテーブル行にクリックイベントを付属させる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
}).then(function(resultList){ var searchResults = resultList.searchResultList; var identificationNum = resultList.identificationNum; var tableColumList = resultList.tableColumList; $.each(resultList, function(i){ // stampevent table if(identificationNum=="A5"){ $("#bodyTableInfo").append($('<tr>') .append($('<td>', {html : "<input type='checkbox' >"})) .append($('<td>', {text : searchResults[i].stampEventId})) .append($('<td>', {text : searchResults[i].stampId })) .append($('<td>', {text : searchResults[i].eventSpace})) .append($('<td>', {text : searchResults[i].eventContents})) .append($('<td>', {text : searchResults[i].deleteFlg}))); } $('#bodyTableInfo tr').on('click', function(){ var stampEventId = $(this).children().text()[0]; $("#bodyTableInfo").append($('<input type="hidden" name="identificationNum" value=' + identificationNum + '>')) .append($('<input type="hidden" name="stampEventId" value=' + stampEventId + '>')) document.getElementById("updateForm").submit(); }); }); |
１６行目：$(‘#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エラーが発生した時に発動 |
１７行目：var stampEventId = $(this).children().text()[0];
$(this) ＝ trタグ
.children() ＝ tdタグ（複数）
.text()[0]; ＝ tdタグのtext要素の０番目 ＝ stampEventId
１８～１９行目：
inputタグをbodyタグに付属させる
１つ目のinputタグのvalue値をメソッドの外にあるidentificationNumから取得し代入
２つ目のinputタグのvalue値を１７行目で取得したstampEventIdを代入
２０行目：サブミットしサーバーに値を渡す。
静的にテーブル行にクリックイベントを付属させる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
}).then(function(resultList){ // ｛｛resultListを使って動的にテーブルを生成する処理｝｝ var checkedList = []; $("input[class='check']").click(function(i) { if($(this).is(":checked")){ var tr = $(this).parents('tr'); var td = tr.children(); checkedList.push(td.eq(1).text()); $("#checkedList").val(checkedList); $("#identificationNumber").val(identificationNum); }else{ checkedList.push(""); } }); $("#authButtonSection") .append($('<li>',{html : "<input type='submit' id='authButton' class='authButton' onclick='location.href="+"\"${pageContext.request.contextPath }/auth/authConfirmProcess\""+"' value='承認' >"})) .append($('<li>',{html : "<input type='submit' id='rejectButton' class='rejectButton' onclick='location.href="+"\"${pageContext.request.contextPath }/auth/authConfirmProcess\""+"' value='却下' >"})); }, } |
前提条件として、動的にテーブルを生成します。
１カラム目に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タグ全てを取得する。
わざわざ３行目でparentsメソッドを使った理由はこのようにDOMツリーを１階層上り
１階層したの全てのtrタグを取得するため
10行目：checkedList.push(td.eq(1).text());
checkedList.push() ＝
１行目で定義している配列にpushメソッドで（）内の値を詰め込んでいく。
td.eq(1).text() ＝ tdタグの２番目のtextにアクセスする。
１１行目：$(“#checkedList”).val(checkedList);
１０行目で値を詰めたcheckedListをcheckedListというＩＤを持つinputタグにvalue値を詰めます。
１２行目：$(“#identificationNumber”).val(identificationNum);
identificationNumも１１行目と同じように、inputタグに詰めます。
|
1 2 3 4 5 6 |
<form:form action="authConfirmProcess" modelAttribute="reservationSearchForm"> <input type="hidden" name="checkedList" id="checkedList" /> <input type="hidden" name="identificationNumber" id="identificationNumber" /> <ul id="authButtonSection"> </ul> </form:form> |
最後にサブミットボタンを押下することでサーバーに値を渡します。
よく間違うポイント
ajaxのthen{}の外にオンクリック属性を定義してしまう。
thenの外に定義した場合、どこからも使われないソースコードになってしまいます。
よって動的に作ったテーブル行にクリック属性を付けることができません。
値を取得する場所を間違える
下記の２つのソースコードはやりたいことは同じです。
|
1 |
$(this).children().text()[0] |
|
1 |
td.eq(1).text() |
しかし、アクセスする概念に違いがあります。
１つ目の$(this).children().text()[0]は、trの子供のtdのテキストの１つ目という意味です。
今回のテーブルでは１カラム目はinputタグのチェックボックスとなっております。
テキストの１つ目ということはinputタグはテキストではないので、今回概念的に飛ばされます。
なので、.text()[0]で取得したいカラムが取れます
２つ目のtd.eq(1).text()はtdタグの２つ目のテキストというアクセスの仕方をしています。
なのでこのアクセス方法だとinputタグも含めて数えられるのでeq(1).text()という風に書きます。
※これをeq(0).textとした場合にinputタグにtext要素がないので、画面でエラーになります。
コメント