以下のようなHTMLにて、
<td>内にあるtextにフォーカスが当たっている状態で、上キー、または、下キーにより、 次の行にあるtextにフォーカスを移動させたいです。html
1<table id="table001"> 2 <tr> 3 <td><input type="text" class="aaaaa" value="1-1" /></td> 4 <td><input type="text" class="aaaaa" value="1-2" /></td> 5 <td><input type="text" class="aaaaa" value="1-3" /></td> 6 </tr> 7 <tr> 8 <td><input type="text" class="aaaaa" value="2-1" /></td> 9 <td><input type="text" class="aaaaa" value="2-2" /></td> 10 <td><input type="text" class="aaaaa" value="2-3" /></td> 11 </tr> 12 <tr> 13 <td><input type="text" class="aaaaa" value="3-1" /></td> 14 <td><input type="text" class="aaaaa" value="3-2" /></td> 15 <td><input type="text" class="aaaaa" value="3-3" /></td> 16 </tr> 17</table>
例)2-2にフォーカスがある状態で上キーを押すと1-2に、下キーを押すと3-2にフォーカスを移動させたいです。
・どのtextにも同じclass名が定義されています。
・行数は動的で、同じページ内に、上記のようなテーブルが複数あります(TableIDは異なります)。
・テーブル間の移動はしません。
・1行目で上キー、最終行で下キーを押してもフォーカスは移動させません。
・左右のフォーカス移動はTabキーなので対象外です。
最初はid、nameを指定して一生懸命書いていたのですが、何か効率の良い方法はありませんでしょうか。
やってみたいこと
JavaScript
1 $('.aaaaa').on("keydown", function (e) { 2 if (e.keyCode === 40) { 3 //-----下----- 4 //今フォーカスがあたっている行を取得 5 let $row = $(this).closest("tr"); 6 //次の行を取得 7 let $row_next = $row.next("tr"); 8 if ($row_next.length) { 9 //次の行がある場合 10 //★ここで、フォーカスがいる列番号(<td>)を取得し、そこにいるtextにフォーカスをあてたい 11 //★その実装方法のイメージがつかずに困っております・・・ 12 } 13 } else if (e.keyCode === 38) { 14 //-----上----- 15 } 16 });
よろしくお願いいたします。
実現できました。
JavaScript
1 $('.aaaaa').on("keydown", function (e) { 2 if (e.keyCode === 40) { 3 //-----下----- 4 //今フォーカスがあたっている行を取得 5 let $row = $(this).closest("tr"); 6 var colIndex = $(this).parent().index(); 7 8 //次の行を取得 9 let $row_next = $row.next("tr"); 10 if ($row_next.length) { 11 //次の行のフォーカスにセット 12 $row_next.find("td").eq(colIndex).find("input").focus(); 13 } 14 } else if (e.keyCode === 38) { 15 //-----上----- 16 } 17 });
回答2件
あなたの回答
tips
プレビュー