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

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

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

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

Q&A

解決済

1回答

5252閲覧

jQueryでtableの隣のセルの値を変更するには?

sakura-shi

総合スコア93

jQuery

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

0グッド

0クリップ

投稿2018/08/21 01:17

編集2018/08/21 02:41

#やりたいこと
フォームの中のtableの隣のセル値を変更したい
class="coll_a"の値をname="coll_q"の値+特定の数値としたい
(例)
name="coll_q[]"の入力値が www.example.com
このとき、右隣りのセルの
class="coll_a" は、www.example.com&id=5
と表示されるようにしたい
同時に右隣りのセルの、name="coll_a[]"の値もwww.example.com&id=5としたい

#やってみたこと

HTML

1<form> 2<table> 3<tr> 4<td> 5 <input type="text" style="width: 4rem;" name="coll_v[]"> 6</td> 7<td> 8 <input type="text" style="width: 20rem;" name="coll_t[]" > 9</td> 10<td> 11 <input type="text" name="coll_q[]" > 12</td> 13<td> 14 <div class="coll_a"></div> 15 <input type="hidden" name="coll_a[]"> 16</td> 17</tr> 18<tr> 19<td> 20 <input type="text" style="width: 4rem;" name="coll_v[]"> 21</td> 22<td> 23 <input type="text" style="width: 20rem;" name="coll_t[]" > 24</td> 25<td> 26 <input type="text" name="coll_q[]" > 27</td> 28<td> 29 <div class="coll_a"></div> 30 <input type="hidden" name="coll_a[]"> 31</td> 32</tr> 33<tr> 34<td> 35 <input type="text" style="width: 4rem;" name="coll_v[]"> 36</td> 37<td> 38 <input type="text" style="width: 20rem;" name="coll_t[]" > 39</td> 40<td> 41 <input type="text" name="coll_q[]" > 42</td> 43<td> 44 <div class="coll_a"></div> 45 <input type="hidden" name="coll_a[]"> 46</td> 47</tr> 48</table> 49</form>

JS

1<script> 2$(function () { 3 $("[name^=coll_q]").on("change", function () { 4 var coll_q = $("[name^=coll_q]").val(); 5 $(this).parent('td').$(".coll_a").val() = coll_q +"&id=5"; 6 }); 7}); 8</script>

その結果
TypeError: $(...).parent(...).$ is not a function
というエラーがコンソールに出力される

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

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

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

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

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

guest

回答1

0

ベストアンサー

JavaScript

1$(function () { 2 $("[name^=coll_q]").on("change", function () { 3 var coll_q = $("[name^=coll_q]").val(); 4 $(this).parent().next().find("[name^=coll_a]").val(coll_q +"&id=5"); 5 }); 6});

別件で気になったのですが、
変数coll_qの値ををnameの前方一致で取得してますが大丈夫ですか?
※nameが"coll_q"で始まる要素ってたくさんできる想定ではありませんか?


追記

とりあえず3番目のセルに入力した値が、その行の4番目のセルに整形された形で出ればいいんですよね?

HTML

1<form> 2 <table> 3 <tr> 4 <td> 5 <input type="text" style="width: 4rem;" name="coll_v[]"> 6 </td> 7 <td> 8 <input type="text" style="width: 20rem;" name="coll_t[]" > 9 </td> 10 <td> 11 <input type="text" name="coll_q[]" > 12 </td> 13 <td> 14 <div class="coll_a"></div> 15 <input type="text" name="coll_a[]"> <!-- hiddenになってたので一旦textにしました--> 16 </td> 17 </tr> 18 <tr> 19 <td> 20 <input type="text" style="width: 4rem;" name="coll_v[]"> 21 </td> 22 <td> 23 <input type="text" style="width: 20rem;" name="coll_t[]" > 24 </td> 25 <td> 26 <input type="text" name="coll_q[]" > 27 </td> 28 <td> 29 <div class="coll_a"></div> 30 <input type="text" name="coll_a[]"> <!-- hiddenになってたので一旦textにしました--> 31 </td> 32 </tr> 33 <tr> 34 <td> 35 <input type="text" style="width: 4rem;" name="coll_v[]"> 36 </td> 37 <td> 38 <input type="text" style="width: 20rem;" name="coll_t[]" > 39 </td> 40 <td> 41 <input type="text" name="coll_q[]" > 42 </td> 43 <td> 44 <div class="coll_a"></div> 45 <input type="text" name="coll_a[]"> <!-- hiddenになってたので一旦textにしました--> 46 </td> 47 </tr> 48 </table> 49</form>

JavaScript

1$(function () { 2 $("[name^=coll_q]").on("change", function () { 3 var coll_q = $(this).val(); 4 console.log(coll_q); 5 $(this).parent().next().find("[name^=coll_a]").val(coll_q +"&id=5"); 6 }); 7});

投稿2018/08/21 02:00

編集2018/08/21 03:28
terrace

総合スコア249

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

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

sakura-shi

2018/08/21 02:43 編集

ありがとうございます nameが"coll_q"で始まる要素ってたくさんできる想定ではありませんか? > そうです! coll_v,coll_t,coll_q,coll_a は、すべて配列という想定です。 質問文のコードを修正しました。 JSで値をセットしたいのは、必ず入力した右隣りのセルのみです。 こういう場合は、どのようにJSを書いたらよいのでしょうか?
terrace

2018/08/21 03:29

ちょっといまいち意思の疎通ができてる感じがしないのですが、 とりあえず追記しました。 結局やりたいのはこういう事ですよね?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問