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

#やりたいこと
フォームの中の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
というエラーがコンソールに出力される

行動規範の内容に同意します

回答1件

ベストアンサー

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を書いたらよいのでしょうか？