teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問本記事は不要となりましたので記事を削除します。

編集履歴

質問編集履歴

7

削除

2021/07/09 04:25

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 【javascript】JQUERYテーブルの初期表示で2行を表示する
1
+ 本記事は不要となりましたので記事を削除します。
test CHANGED
@@ -1,49 +1,5 @@
1
- ### 前提・実現したいこと
1
+ ### 削除
2
2
 
3
3
 
4
4
 
5
- ここに質問の内容を詳しく書いてください。
6
-
7
- （例）PHP(CakePHP)で●●なシステムを作っています。
8
-
9
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
10
-
11
-
12
-
13
- ### 発生している問題・エラーメッセージ
14
-
15
-
16
-
17
- ```
18
-
19
- エラーメッセージ
20
-
21
- ```
22
-
23
-
24
-
25
- ### 該当のソースコード
26
-
27
-
28
-
29
- ```ここに言語名を入力
30
-
31
- ソースコード
32
-
33
- ```
34
-
35
-
36
-
37
- ### 試したこと
38
-
39
-
40
-
41
- ここに問題に対して試したことを記載してください。
5
+ 本記事は不要となりましたので記事を削除します。
42
-
43
-
44
-
45
- ### 補足情報（FW/ツールのバージョンなど）
46
-
47
-
48
-
49
- ここにより詳細な情報を記載してください。

6

削除

2021/07/09 04:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,128 +1,24 @@
1
- 投稿タイトル「【javascript】JQUERYテーブルにJSONを読込みして画面表示する」に関連します。
2
-
3
- [参考URL]
4
-
5
- JQUERYのテーブルは下記サイトを参考にしました。
6
-
7
- http://mae.chab.in/archives/2146
8
-
9
- アドバイスがございましたら、よろしくお願い致します。
1
+ ### 前提・実現したいこと
10
2
 
11
3
 
12
4
 
13
- ### 前提・実現したいこと
5
+ ここに質問の内容を詳しく書いてください。
14
6
 
15
- JQUERYテーブルにて、親要素をcloneして2行表示したい。
7
+ （例）PHP(CakePHP)で●●なシステムを作っています。
16
8
 
17
- 最大で2行表示して、各行の要素をJSONデータで表示したい。
9
+ ■■な機能を実装中に以下のエラーメッセージが発生しました。
18
10
 
19
11
 
20
12
 
21
- 【html画面イメージ（初期表示）】
22
-
23
- ┌─────┬────┬─────┐
24
-
25
- │リスト選択│リスト名│追加/削除 │
13
+ ### 発生している問題・エラーメッセージ
26
-
27
- ├─────┼────┼─────┤
28
-
29
- │A ▽ │a │ ＋ ‐ │
30
-
31
- └─────┴────┴─────┘
32
14
 
33
15
 
34
16
 
35
- ■実現したいことはJSONを読込みして画面を表示したいです。
17
+ ```
36
18
 
37
- 【html画面イメージ（JSON読込みして画面表示）】
19
+ エラーメッセージ
38
20
 
39
- ┌─────┬────┬─────┐
40
-
41
- │リスト選択│リスト名│追加/削除 │
42
-
43
- ├─────┼────┼─────┤
44
-
45
- │C ▽ │c │ ＋ ‐ │
46
-
47
- ├─────┼────┼─────┤
48
-
49
- │D ▽ │d │ ＋ ‐ │
50
-
51
- └─────┴────┴─────┘
52
-
53
- ### 発生している問題・エラーメッセージ
54
-
55
- 元々、1行表示しているため、同じコードを記述すると2行表示すると考えましたが、結果は親要素をcloneして5行表示しました。
56
-
57
-
58
-
59
- ### 現状
60
-
61
- やりたいことは下記手順を実施して、chrome画面に2行表示することです。
62
-
63
- 【手順】
21
+ ```
64
-
65
- 1．htmlをダブルクリック(ブラウザで画面表示の更新)する。
66
-
67
- 2．テーブルは2行表示する。
68
-
69
- 3．JSONデータを読込みして、JSONデータを画面に表示する。
70
-
71
- 【JSONデータ】
72
-
73
- [
74
-
75
- {"classNum":C,"className":c},
76
-
77
- {"classNum":D,"className":D}
78
-
79
- ]
80
-
81
- ※
82
-
83
- 【結果】
84
-
85
- 現在の実装で手順を実施した際、JSONデータを読み込んで、下記を表示しました。
86
-
87
- INPUT(テキストボックス)のみ読み込みました。リストボックスの設定値は初期値のままでした。
88
-
89
- ┌─────┬────┬─────┐
90
-
91
- │リスト選択│リスト名│追加/削除 │
92
-
93
- ├─────┼────┼─────┤
94
-
95
- │A ▽ │c │ ＋ ‐ │
96
-
97
- └─────┴────┴─────┘
98
-
99
-
100
-
101
- 【追記2021/7/6 11：37 JSONデータ読込み時の問題 】
102
-
103
- JSONを読み込んだ場合の実動作は、親要素の値を更新しています。
104
-
105
- そのため、追加ボタン(+)を押下すると、下記になります。
106
-
107
- リスト選択　リスト名
108
-
109
- A c
110
-
111
- A c
112
-
113
- 【期待する動作】
114
-
115
- リスト選択　リスト名
116
-
117
- A c
118
-
119
- A a ※親要素の初期値を表示すること
120
-
121
- ■問題点
122
-
123
- JSONデータを読み込んだ際、子要素の1番目にJSONデータを設定したいが、
124
-
125
- 親要素のデータを更新した。
126
22
 
127
23
 
128
24
 
@@ -132,73 +28,7 @@
132
28
 
133
29
  ```ここに言語名を入力
134
30
 
135
- $(document).ready(function() {
136
-
137
- // chromeブラウザにて画面表示すると、テーブル内は一行表示しました。
138
-
139
- $('#p2146-2-tbody>tr')
140
-
141
- .clone(true)
31
+ ソースコード
142
-
143
- .insertAfter($('#p2146-2-tbody>tr'));
144
-
145
-
146
-
147
- // 下記のように修正しますと、5行表示しました。原因が分かりません。
148
-
149
- // ※[参考URL]の＜ サンプル ＞画像を5行表示
150
-
151
- $('#p2146-2-tbody>tr')
152
-
153
- .clone(true)
154
-
155
- .insertAfter($('#p2146-2-tbody>tr'));
156
-
157
-
158
-
159
- $('#p2146-2-tbody>tr')
160
-
161
- .clone(true)
162
-
163
- .insertAfter($('#p2146-2-tbody>tr'));
164
-
165
-
166
-
167
- }
168
-
169
- // ===============
170
-
171
- // ◆classOnload.js
172
-
173
- // JSONデータの読込み
174
-
175
- window.onload = function() {
176
-
177
- read_classNameJSON();
178
-
179
- let clnamdat = window.classNameJSN;
180
-
181
- }
182
-
183
-
184
-
185
- // ===============
186
-
187
- // ◆classNameJson.js
188
-
189
- // 読込み対象のJSONデータ
190
-
191
- window.classNameJSN = [
192
-
193
- {"classNum":C,"className":c},
194
-
195
- {"classNum":C,"className":d}
196
-
197
- ];
198
-
199
- }
200
-
201
-
202
32
 
203
33
  ```
204
34
 
@@ -206,17 +36,9 @@
206
36
 
207
37
  ### 試したこと
208
38
 
209
- 下記を試しましたが、JQUERYでエラーが発生しました。
210
-
211
- ```ここに言語を入力
212
-
213
- var clone=$(this).parent().clone(true);
214
-
215
- clone.insertAfter($(this).parent());
216
-
217
- ```
218
39
 
219
40
 
41
+ ここに問題に対して試したことを記載してください。
220
42
 
221
43
 
222
44
 

5

現状を更新

2021/07/09 04:23

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -98,6 +98,34 @@
98
98
 
99
99
 
100
100
 
101
+ 【追記2021/7/6 11：37 JSONデータ読込み時の問題 】
102
+
103
+ JSONを読み込んだ場合の実動作は、親要素の値を更新しています。
104
+
105
+ そのため、追加ボタン(+)を押下すると、下記になります。
106
+
107
+ リスト選択　リスト名
108
+
109
+ A c
110
+
111
+ A c
112
+
113
+ 【期待する動作】
114
+
115
+ リスト選択　リスト名
116
+
117
+ A c
118
+
119
+ A a ※親要素の初期値を表示すること
120
+
121
+ ■問題点
122
+
123
+ JSONデータを読み込んだ際、子要素の1番目にJSONデータを設定したいが、
124
+
125
+ 親要素のデータを更新した。
126
+
127
+
128
+
101
129
  ### 該当のソースコード
102
130
 
103
131
 

4

誤記修正

2021/07/06 02:38

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,11 +42,11 @@
42
42
 
43
43
  ├─────┼────┼─────┤
44
44
 
45
- │A ▽ │a │ ＋ ‐ │
45
+ │C ▽ │c │ ＋ ‐ │
46
46
 
47
47
  ├─────┼────┼─────┤
48
48
 
49
- │B ▽ │b │ ＋ ‐ │
49
+ │D ▽ │d │ ＋ ‐ │
50
50
 
51
51
  └─────┴────┴─────┘
52
52
 

3

やりたいことの補足とJSONデータを追加しました。

2021/07/06 02:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -53,6 +53,48 @@
53
53
  ### 発生している問題・エラーメッセージ
54
54
 
55
55
  元々、1行表示しているため、同じコードを記述すると2行表示すると考えましたが、結果は親要素をcloneして5行表示しました。
56
+
57
+
58
+
59
+ ### 現状
60
+
61
+ やりたいことは下記手順を実施して、chrome画面に2行表示することです。
62
+
63
+ 【手順】
64
+
65
+ 1．htmlをダブルクリック(ブラウザで画面表示の更新)する。
66
+
67
+ 2．テーブルは2行表示する。
68
+
69
+ 3．JSONデータを読込みして、JSONデータを画面に表示する。
70
+
71
+ 【JSONデータ】
72
+
73
+ [
74
+
75
+ {"classNum":C,"className":c},
76
+
77
+ {"classNum":D,"className":D}
78
+
79
+ ]
80
+
81
+ ※
82
+
83
+ 【結果】
84
+
85
+ 現在の実装で手順を実施した際、JSONデータを読み込んで、下記を表示しました。
86
+
87
+ INPUT(テキストボックス)のみ読み込みました。リストボックスの設定値は初期値のままでした。
88
+
89
+ ┌─────┬────┬─────┐
90
+
91
+ │リスト選択│リスト名│追加/削除 │
92
+
93
+ ├─────┼────┼─────┤
94
+
95
+ │A ▽ │c │ ＋ ‐ │
96
+
97
+ └─────┴────┴─────┘
56
98
 
57
99
 
58
100
 
@@ -120,9 +162,9 @@
120
162
 
121
163
  window.classNameJSN = [
122
164
 
123
- {"classNum":A,"className":a},
165
+ {"classNum":C,"className":c},
124
166
 
125
- {"classNum":B,"className":b}
167
+ {"classNum":C,"className":d}
126
168
 
127
169
  ];
128
170
 

2

JSON読込み処理を追加しました。

2021/07/06 02:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -62,6 +62,8 @@
62
62
 
63
63
  ```ここに言語名を入力
64
64
 
65
+ $(document).ready(function() {
66
+
65
67
  // chromeブラウザにて画面表示すると、テーブル内は一行表示しました。
66
68
 
67
69
  $('#p2146-2-tbody>tr')
@@ -91,6 +93,22 @@
91
93
  .insertAfter($('#p2146-2-tbody>tr'));
92
94
 
93
95
 
96
+
97
+ }
98
+
99
+ // ===============
100
+
101
+ // ◆classOnload.js
102
+
103
+ // JSONデータの読込み
104
+
105
+ window.onload = function() {
106
+
107
+ read_classNameJSON();
108
+
109
+ let clnamdat = window.classNameJSN;
110
+
111
+ }
94
112
 
95
113
 
96
114
 

1

JSON読み込みのイメージとデータを追加しました。

2021/07/06 02:02

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -15,6 +15,40 @@
15
15
  JQUERYテーブルにて、親要素をcloneして2行表示したい。
16
16
 
17
17
  最大で2行表示して、各行の要素をJSONデータで表示したい。
18
+
19
+
20
+
21
+ 【html画面イメージ（初期表示）】
22
+
23
+ ┌─────┬────┬─────┐
24
+
25
+ │リスト選択│リスト名│追加/削除 │
26
+
27
+ ├─────┼────┼─────┤
28
+
29
+ │A ▽ │a │ ＋ ‐ │
30
+
31
+ └─────┴────┴─────┘
32
+
33
+
34
+
35
+ ■実現したいことはJSONを読込みして画面を表示したいです。
36
+
37
+ 【html画面イメージ（JSON読込みして画面表示）】
38
+
39
+ ┌─────┬────┬─────┐
40
+
41
+ │リスト選択│リスト名│追加/削除 │
42
+
43
+ ├─────┼────┼─────┤
44
+
45
+ │A ▽ │a │ ＋ ‐ │
46
+
47
+ ├─────┼────┼─────┤
48
+
49
+ │B ▽ │b │ ＋ ‐ │
50
+
51
+ └─────┴────┴─────┘
18
52
 
19
53
  ### 発生している問題・エラーメッセージ
20
54
 
@@ -56,6 +90,28 @@
56
90
 
57
91
  .insertAfter($('#p2146-2-tbody>tr'));
58
92
 
93
+
94
+
95
+
96
+
97
+ // ===============
98
+
99
+ // ◆classNameJson.js
100
+
101
+ // 読込み対象のJSONデータ
102
+
103
+ window.classNameJSN = [
104
+
105
+ {"classNum":A,"className":a},
106
+
107
+ {"classNum":B,"className":b}
108
+
109
+ ];
110
+
111
+ }
112
+
113
+
114
+
59
115
  ```
60
116
 
61
117