質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

4091閲覧

html の table内に配置したtextボックス間を上下キーで移動させたい(jQuery)

ryu_k

総合スコア19

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/22 02:55

編集2020/07/27 02:05

以下のような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 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/07/22 03:28

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
ryu_k

2020/07/22 04:02

ありがとうございます。追記してみます。
kei344

2020/07/22 04:14

「フォーカスを移動」がわからないのでしょうか、それとも「次の行のinput要素の取得」がわからないのでしょうか。
ryu_k

2020/07/22 04:18

ありがとうございます。「次の行で今いる列と同じ列番号のinput要素の取得」方法がわからずに悩んでおります。
guest

回答2

0

ベストアンサー

「次の行で今いる列と同じ列番号のinput要素の取得」方法がわからずに悩んでおります。

td要素のindexで判断すればどの列かはわかると思います。

【.index() | jQuery API Documentation】
https://api.jquery.com/index/

【jQueryでクリックされた要素が何番目か取得する - Qiita】
https://qiita.com/otoyo/items/04e12fe478b7f76ce545

【[jQuery]n番目の要素にアクセスする « Codaholic】
http://codaholic.org/?p=779

【.eq() | jQuery API Documentation】
https://api.jquery.com/eq/

投稿2020/07/22 04:24

kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryu_k

2020/07/22 04:53

やりたいことの流れ通りに参照先を提示いただいてありがとうございます。やってみます!
ryu_k

2020/07/27 02:06

できました。アドバイスいただき、ありがとうございました。
guest

0

テキストボックスにIDをつけてよければ、以下のようにIDをつけてフォーカス移動させると
少しは楽に実装できると思います。最初の行と最終行のチェックも、例えば
row0_col1 みたいな存在しないIDならフォーカスを移動させないとすることでさらっと
実装できるはずです。

列1列2列3
row1_col1row1_col2row1_col3
row2_col1row2_col2row2_col3
row3_col1row3_col2row3_col3

投稿2020/07/22 03:33

YakumoSaki

総合スコア2027

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryu_k

2020/07/22 04:02

ありがとうございます。ですが列IDとか指定せずに実現できないものかと考えてます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問