jQueryでチェックしたテーブルのレコードを取得みたいな〜
チェックボックスでチェックして、その後チェック部分だけ行の値がほしいときにつくりました。
とはいってもjavascriptで処理してるんですがw
追記(2011-12-15):下記サンプルを掲載しました。→W7工廠分室|トップページ
←この本もってたらたぶんjQueryで困らないと思います。(付箋がいるかもしれない・・・謎)
HTML
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script type="text/javascript" src="getTableRecords.js"></script> </head> <body> <table border="1"> <thead> <tr><th>項目1</th><th>項目2</th><th>項目3</th><th>チェック</th></tr> </thead> <tbody> <tr><td>値0-0</td><td>値0-1</td><td>値0-2</td><td><input type="checkbox" name="r_chk"/></td></tr> <tr><td>値1-0</td><td>値1-1</td><td>値1-2</td><td><input type="checkbox" name="r_chk"/></td></tr> <tr><td>値2-0</td><td>値2-1</td><td>値2-2</td><td><input type="checkbox" name="r_chk"/></td></tr> <tr><td>値3-0</td><td>値3-1</td><td>値3-2</td><td><input type="checkbox" name="r_chk"/></td></tr> </tbody> </table> <button onClick="getTableRecords()">レコード取得</button> </body> </html>
JavaScript (getTableRecords.js)
/* getTableRecords.js */ function getTableRecords(){ var chkRec=$("input[name=r_chk]:checked").parents("tr"); if (chkRec.length == 0){ alert('選択してください');return; } var td1=[]; var td2=[]; var td3=[]; for(i=0;i<chkRec.length;i++){ var rec=chkRec[i]; td1[i]=$(rec).children("td:nth-child(1)").html(); td2[i]=$(rec).children("td:nth-child(2)").html(); td3[i]=$(rec).children("td:nth-child(3)").html(); alert(td1[i]+','+td2[i]+','+td3[i]); } }
あえて2次元配列は使っていないのですが・・・
parentではinput直上のtdをとってしまうところとか、nth-childは1からはじまるというところとか
やっぱり時間かかってしまいました。
でも悩むところ・・・・もっと簡単にできんのかなあと。
あと、表示が逆順なのはなぜ?w
(追記)ラジオボタンの場合
HTML→type="checkbox"を"radio"に変更し、
$(function(){ $("input[name=r_chk]").click(function(){ var chkRec=$("input[name=r_chk]:checked").parents("tr"); var td1=$(chkRec).children("td:nth-child(1)").html(); var td2=$(chkRec).children("td:nth-child(2)").html(); var td3=$(chkRec).children("td:nth-child(3)").html(); alert(td1+','+td2+','+td3); }); });