teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

質問文の追記コードに合わせて追加編集

2018/01/12 09:05

投稿

Tomak
Tomak

スコア1652

answer CHANGED
@@ -10,28 +10,61 @@
10
10
 
11
11
  HTMLは上記なので、`document.querySelector('[name^="test_d_name"]')`のように前方一致で書くか、配列も含めて指定しなければなりません。(例:**document.querySelector('[name="test_d_name[0]"]')**)
12
12
 
13
+ **== 追記 ==**
14
+ 他の回答者の方からも私からも、実行したい`<script>`を一番最後(`</body>`の直前)に書いてくださいと言われていると思います。いちおう理由も書いたのですが。。。。
15
+ 別ファイルのソースにまとめようが、インラインに書こうが実行されるタイミングは一緒ですので、下記のように`</body>`直前に移動してください。(または`<html><head>..ここ..</head>`の部分に移動します)
16
+
13
17
  ```php
18
+ <!DOCTYPE html>
19
+ <html>
20
+ <head>
21
+ //...
22
+ </head>
23
+ <body>
24
+ //...
14
25
  <form name="フォーム名" id="test_info" action="..." method="post">
15
- //...
26
+ //...
27
+ <h3 class="Test_header">テスト</h3>
28
+ <table data-role="table" id="test_tab" data-mode="reflow" class="ui-responsive table-stroke">
16
- <table>
29
+ <thead>
30
+ <tr>
31
+ <th width="30%">名前</th>
32
+ <th width="30%">名</th>
33
+ <th width="30%">住所</th>
34
+ <th width="10%">削除</th>
35
+ </tr>
36
+ </thead>
37
+ <tbody id="test_tbody">
38
+ {assign var='i' value=0}
39
+
17
40
  <tr>
18
- <td>
19
- <select name="test_info" id="select_test_info" data-native-menu="true">
20
- <option value="">選択してください</option>
21
- {section name=idx loop=$test_list}
22
- <option value="{$test_list[idx].test_name|escape:"html"}"{if $test_list[idx].test_name == $test_list} selected{/if} data-disp="{$test_list[idx].test_d_name}" data-address="{$test_list[idx].test_address}">{$test_list[idx].test_name}</option>
23
- {/section}
24
- </select>
25
- </td>
26
- <td><input type="text" name="test_d_name[{$i}]" value="{$test_list[idx1].test_d_name|escape:"html"}" placeholder="名" /></td>
27
- <td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
28
- <td><button type="button" id="btn_del_test{$i}" class="deleteTest ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete">削除</button>
41
+ <td>
42
+ <select name="test_info" id="select_test_info" data-native-menu="true">
43
+ <option value="">選択してください</option>
44
+ {section name=idx loop=$test_list}
45
+ <option value="{$test_list[idx].test_name|escape:"html"}"{if $test_list[idx].test_name == $test_list} selected{/if} data-disp="{$test_list[idx].test_d_name}" data-address="{$test_list[idx].test_address}">{$test_list[idx].test_name}</option>
46
+ {/section}
47
+ </select>
48
+ </td>
49
+ <td><input type="text" name="test_d_name[{$i}]" value="{$test_list[idx1].test_d_name|escape:"html"}" placeholder="名" /></td>
50
+ <td><input type="text" name="test_address[{$i}]" value="{$test_list[idx1].test_address|escape:"html"}" placeholder="住所" /></td>
51
+ <td><button type="button" id="btn_del_test{$i}" class="deleteTest ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete">削除</button>
29
52
  </tr>
30
- //...
53
+ </tbody>
31
- </table>
54
+ </table>
32
55
  </form>
33
56
 
57
+ //...
58
+
59
+ //↓↓↓↓↓↓↓ ここにJavaScript移動してみてください ↓↓↓↓↓↓↓↓
34
- <script type="text/javascript">
60
+ <script language="JavaScript" src="test.js?t={$smarty.now}"></script>
61
+ </body>
62
+ </html>
63
+ ```
64
+
65
+ `test.js`は下記のようにします。(下記は変更していません)
66
+
67
+ ```js
35
68
  console.log(document.getElementById('select_test_info'));
36
69
  console.log(document.querySelector('form[name="フォーム名"]'));
37
70
 
@@ -57,7 +90,4 @@
57
90
  this.querySelector('input[name^="test_d_name"]').value = option.dataset.disp;
58
91
  this.querySelector('input[name^="test_d_address"]').value = option.dataset.address;
59
92
  }, false);
60
- </script>
61
- </body>
62
- </html>
63
93
  ```