teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問javascript for文で表を出す

編集履歴

質問編集履歴

5

ok

2020/03/17 14:11

投稿

t_t_t_t_t_t
t_t_t_t_t_t

スコア10

test CHANGED
File without changes
test CHANGED
@@ -20,104 +20,6 @@
20
20
 
21
21
 
22
22
 
23
- ### 該当のソースコード
24
-
25
-
26
-
27
- ```html
28
-
29
- <table id="table" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
30
-
31
- <thead>
32
-
33
- <tr id="row">
34
-
35
- <td bgcolor="#BA55D3" width="200">番号</td>
36
-
37
- <td bgcolor="#BA55D3" width="200">ユーザー名</td>
38
-
39
- <td bgcolor="#BA55D3" width="200">ログイン名</td>
40
-
41
- <td bgcolor="#BA55D3" width="200">パスワード</td>
42
-
43
- </tr>
44
-
45
- </thead>
46
-
47
- <thead id="down">
48
-
49
- </thead>
50
-
51
- </table>
52
-
53
- ```
54
-
55
- ```javascript
56
-
57
- var table = document.getElementById("table");
58
-
59
- var up = document.getElementById("up");
60
-
61
- var down = document.getElementById("down");
62
-
63
- if(table){
64
-
65
- table.addEventListener("click", function(){
66
-
67
- var num = 1;
68
-
69
- for (num; num <= 100; num++) {
70
-
71
-
72
-
73
- var tr = document.createElement("tr");
74
-
75
-
76
-
77
- var td1 = document.createElement("td");
78
-
79
- td1.innerHTML = num;
80
-
81
- tr.appendChild(td1);
82
-
83
-
84
-
85
- var td2 = document.createElement("td");
86
-
87
- td2.innerHTML = 'ユーザー名' + num;
88
-
89
- tr.appendChild(td2);
90
-
91
-
92
-
93
- var td3 = document.createElement("td");
94
-
95
- td3.innerHTML = 'ログインID' + num;
96
-
97
- tr.appendChild(td3);
98
-
99
-
100
-
101
- var td4 = document.createElement("td");
102
-
103
- td4.innerHTML = 'パスワード' + num;
104
-
105
- tr.appendChild(td4);
106
-
107
-
108
-
109
- down.appendChild(tr);
110
-
111
-
112
-
113
- }
114
-
115
- });
116
-
117
- }
118
-
119
- ```
120
-
121
23
  ### 試したこと
122
24
 
123
25
  記述最下部にbreakを使うと一人分しか出せないし、return false;をしても同様。if文を組み合わせても何度もクリックできる状態です。disabled属性を使おうと試みましたが動かなくなったりしました。

4

削除された内容の復元を行いました

2020/03/17 14:11

投稿

t_t_t_t_t_t
t_t_t_t_t_t

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,17 +1,129 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
+ htmlとjavascriptでクリックされたら100人分の表を作成するプログラムを作成しています
3
4
 
5
+ クリックを何回押しても100人分だけ表示したいのですが、分かりません
4
6
 
5
- htmlとjavascriptでクリックされたら100個分の表を作成するプログラムを作成しています
7
+
6
8
 
9
+ ### 発生している問題・エラーメッセージ
7
10
 
11
+
8
12
 
13
+ ```
9
14
 
15
+ クリックを押すと100人分出ますが、もう一度クリックすると下にもう100人分出てくるので
10
16
 
17
+ 二度目以降のクリックを無効にするか、二度目以降を削除するかのコードの書き方が分からなく困っています
11
18
 
19
+ ```
20
+
21
+
22
+
23
+ ### 該当のソースコード
24
+
25
+
26
+
27
+ ```html
28
+
29
+ <table id="table" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
30
+
31
+ <thead>
32
+
33
+ <tr id="row">
34
+
35
+ <td bgcolor="#BA55D3" width="200">番号</td>
36
+
37
+ <td bgcolor="#BA55D3" width="200">ユーザー名</td>
38
+
39
+ <td bgcolor="#BA55D3" width="200">ログイン名</td>
40
+
41
+ <td bgcolor="#BA55D3" width="200">パスワード</td>
42
+
43
+ </tr>
44
+
45
+ </thead>
46
+
47
+ <thead id="down">
48
+
49
+ </thead>
50
+
51
+ </table>
52
+
53
+ ```
54
+
55
+ ```javascript
56
+
57
+ var table = document.getElementById("table");
58
+
59
+ var up = document.getElementById("up");
60
+
61
+ var down = document.getElementById("down");
62
+
63
+ if(table){
64
+
65
+ table.addEventListener("click", function(){
66
+
67
+ var num = 1;
68
+
69
+ for (num; num <= 100; num++) {
70
+
71
+
72
+
73
+ var tr = document.createElement("tr");
74
+
75
+
76
+
77
+ var td1 = document.createElement("td");
78
+
79
+ td1.innerHTML = num;
80
+
81
+ tr.appendChild(td1);
82
+
83
+
84
+
85
+ var td2 = document.createElement("td");
86
+
87
+ td2.innerHTML = 'ユーザー名' + num;
88
+
89
+ tr.appendChild(td2);
90
+
91
+
92
+
93
+ var td3 = document.createElement("td");
94
+
95
+ td3.innerHTML = 'ログインID' + num;
96
+
97
+ tr.appendChild(td3);
98
+
99
+
100
+
101
+ var td4 = document.createElement("td");
102
+
103
+ td4.innerHTML = 'パスワード' + num;
104
+
105
+ tr.appendChild(td4);
106
+
107
+
108
+
109
+ down.appendChild(tr);
110
+
111
+
112
+
113
+ }
114
+
115
+ });
116
+
117
+ }
118
+
119
+ ```
12
120
 
13
121
  ### 試したこと
14
122
 
15
123
  記述最下部にbreakを使うと一人分しか出せないし、return false;をしても同様。if文を組み合わせても何度もクリックできる状態です。disabled属性を使おうと試みましたが動かなくなったりしました。
16
124
 
17
125
  子要素が1つ上にある場合は追加するような処理をしない方法があれば聞きたいです。
126
+
127
+ ### 補足情報（FW/ツールのバージョンなど）
128
+
129
+ ここにより詳細な情報を記載してください。

3

文法

2020/03/17 08:03

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- javascript for文で100人分表を出す
1
+ javascript for文で表を出す
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- htmlとjavascriptでクリックされたら100人分の表を作成するプログラムを作成しています
5
+ htmlとjavascriptでクリックされたら100個分の表を作成するプログラムを作成しています
6
6
 
7
7
 
8
8
 

2

文法

2020/03/04 08:11

投稿

t_t_t_t_t_t
t_t_t_t_t_t

スコア10

test CHANGED
@@ -1 +1 @@
1
- javascript for文でクリックしたら100人分だけ表を出したい！！
1
+ javascript for文で100人分表を出す
test CHANGED
@@ -4,125 +4,9 @@
4
4
 
5
5
  htmlとjavascriptでクリックされたら100人分の表を作成するプログラムを作成しています
6
6
 
7
- クリックを何回押しても100人分だけ表示したいのですが、分かりません
8
7
 
9
8
 
10
9
 
11
- ### 発生している問題・エラーメッセージ
12
-
13
-
14
-
15
- ```
16
-
17
- クリックを押すと100人分出ますが、もう一度クリックすると下にもう100人分出てくるので
18
-
19
- 二度目以降のクリックを無効にするか、二度目以降を削除するかのコードの書き方が分からなく困っています
20
-
21
- ```
22
-
23
-
24
-
25
- ### 該当のソースコード
26
-
27
-
28
-
29
- ```html
30
-
31
- <table id="table" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
32
-
33
- <thead>
34
-
35
- <tr id="row">
36
-
37
- <td bgcolor="#BA55D3" width="200">番号</td>
38
-
39
- <td bgcolor="#BA55D3" width="200">ユーザー名</td>
40
-
41
- <td bgcolor="#BA55D3" width="200">ログイン名</td>
42
-
43
- <td bgcolor="#BA55D3" width="200">パスワード</td>
44
-
45
- </tr>
46
-
47
- </thead>
48
-
49
- <thead id="down">
50
-
51
- </thead>
52
-
53
- </table>
54
-
55
- ```
56
-
57
- ```javascript
58
-
59
- var table = document.getElementById("table");
60
-
61
- var up = document.getElementById("up");
62
-
63
- var down = document.getElementById("down");
64
-
65
-
66
-
67
-
68
-
69
- if(table){
70
-
71
- table.addEventListener("click", function(){
72
-
73
- var num = 1;
74
-
75
- for (num; num <= 100; num++) {
76
-
77
-
78
-
79
- var tr = document.createElement("tr");
80
-
81
-
82
-
83
- var td1 = document.createElement("td");
84
-
85
- td1.innerHTML = num;
86
-
87
- tr.appendChild(td1);
88
-
89
-
90
-
91
- var td2 = document.createElement("td");
92
-
93
- td2.innerHTML = 'ユーザー名' + num;
94
-
95
- tr.appendChild(td2);
96
-
97
-
98
-
99
- var td3 = document.createElement("td");
100
-
101
- td3.innerHTML = 'ログインID' + num;
102
-
103
- tr.appendChild(td3);
104
-
105
-
106
-
107
- var td4 = document.createElement("td");
108
-
109
- td4.innerHTML = 'パスワード' + num;
110
-
111
- tr.appendChild(td4);
112
-
113
-
114
-
115
- down.appendChild(tr);
116
-
117
-
118
-
119
- }
120
-
121
- });
122
-
123
- }
124
-
125
- ```
126
10
 
127
11
 
128
12
 
@@ -131,13 +15,3 @@
131
15
  記述最下部にbreakを使うと一人分しか出せないし、return false;をしても同様。if文を組み合わせても何度もクリックできる状態です。disabled属性を使おうと試みましたが動かなくなったりしました。
132
16
 
133
17
  子要素が1つ上にある場合は追加するような処理をしない方法があれば聞きたいです。
134
-
135
-
136
-
137
-
138
-
139
- ### 補足情報（FW/ツールのバージョンなど）
140
-
141
-
142
-
143
- ここにより詳細な情報を記載してください。

1

tableタグでtypeは使えないんですね。勉強になります！

2020/02/21 07:42

投稿

t_t_t_t_t_t
t_t_t_t_t_t

スコア10

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ```html
30
30
 
31
- <table id="table" type="button" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
31
+ <table id="table" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
32
32
 
33
33
  <thead>
34
34