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

質問編集履歴

5

ok

2020/03/17 14:11

投稿

t_t_t_t_t_t
t_t_t_t_t_t

スコア10

title CHANGED
File without changes
body CHANGED
@@ -9,55 +9,6 @@
9
9
  二度目以降のクリックを無効にするか、二度目以降を削除するかのコードの書き方が分からなく困っています
10
10
  ```
11
11
 
12
- ### 該当のソースコード
13
-
14
- ```html
15
- <table id="table" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
16
- <thead>
17
- <tr id="row">
18
- <td bgcolor="#BA55D3" width="200">番号</td>
19
- <td bgcolor="#BA55D3" width="200">ユーザー名</td>
20
- <td bgcolor="#BA55D3" width="200">ログイン名</td>
21
- <td bgcolor="#BA55D3" width="200">パスワード</td>
22
- </tr>
23
- </thead>
24
- <thead id="down">
25
- </thead>
26
- </table>
27
- ```
28
- ```javascript
29
- var table = document.getElementById("table");
30
- var up = document.getElementById("up");
31
- var down = document.getElementById("down");
32
- if(table){
33
- table.addEventListener("click", function(){
34
- var num = 1;
35
- for (num; num <= 100; num++) {
36
-
37
- var tr = document.createElement("tr");
38
-
39
- var td1 = document.createElement("td");
40
- td1.innerHTML = num;
41
- tr.appendChild(td1);
42
-
43
- var td2 = document.createElement("td");
44
- td2.innerHTML = 'ユーザー名' + num;
45
- tr.appendChild(td2);
46
-
47
- var td3 = document.createElement("td");
48
- td3.innerHTML = 'ログインID' + num;
49
- tr.appendChild(td3);
50
-
51
- var td4 = document.createElement("td");
52
- td4.innerHTML = 'パスワード' + num;
53
- tr.appendChild(td4);
54
-
55
- down.appendChild(tr);
56
-
57
- }
58
- });
59
- }
60
- ```
61
12
  ### 試したこと
62
13
  記述最下部にbreakを使うと一人分しか出せないし、return false;をしても同様。if文を組み合わせても何度もクリックできる状態です。disabled属性を使おうと試みましたが動かなくなったりしました。
63
14
  子要素が1つ上にある場合は追加するような処理をしない方法があれば聞きたいです。

4

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

2020/03/17 14:11

投稿

t_t_t_t_t_t
t_t_t_t_t_t

スコア10

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,65 @@
1
1
  ### 前提・実現したいこと
2
-
3
- htmlとjavascriptでクリックされたら100分の表を作成するプログラムを作成しています
2
+ htmlとjavascriptでクリックされたら100分の表を作成するプログラムを作成しています
4
-
3
+ クリックを何回押しても100人分だけ表示したいのですが、分かりません
4
+
5
-
5
+ ### 発生している問題・エラーメッセージ
6
+
6
-
7
+ ```
8
+ クリックを押すと100人分出ますが、もう一度クリックすると下にもう100人分出てくるので
9
+ 二度目以降のクリックを無効にするか、二度目以降を削除するかのコードの書き方が分からなく困っています
10
+ ```
11
+
12
+ ### 該当のソースコード
13
+
14
+ ```html
15
+ <table id="table" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
16
+ <thead>
17
+ <tr id="row">
18
+ <td bgcolor="#BA55D3" width="200">番号</td>
19
+ <td bgcolor="#BA55D3" width="200">ユーザー名</td>
20
+ <td bgcolor="#BA55D3" width="200">ログイン名</td>
21
+ <td bgcolor="#BA55D3" width="200">パスワード</td>
22
+ </tr>
23
+ </thead>
24
+ <thead id="down">
25
+ </thead>
26
+ </table>
27
+ ```
28
+ ```javascript
29
+ var table = document.getElementById("table");
30
+ var up = document.getElementById("up");
31
+ var down = document.getElementById("down");
32
+ if(table){
33
+ table.addEventListener("click", function(){
34
+ var num = 1;
35
+ for (num; num <= 100; num++) {
36
+
37
+ var tr = document.createElement("tr");
38
+
39
+ var td1 = document.createElement("td");
40
+ td1.innerHTML = num;
41
+ tr.appendChild(td1);
42
+
43
+ var td2 = document.createElement("td");
44
+ td2.innerHTML = 'ユーザー名' + num;
45
+ tr.appendChild(td2);
46
+
47
+ var td3 = document.createElement("td");
48
+ td3.innerHTML = 'ログインID' + num;
49
+ tr.appendChild(td3);
50
+
51
+ var td4 = document.createElement("td");
52
+ td4.innerHTML = 'パスワード' + num;
53
+ tr.appendChild(td4);
54
+
55
+ down.appendChild(tr);
56
+
57
+ }
58
+ });
59
+ }
60
+ ```
7
61
  ### 試したこと
8
62
  記述最下部にbreakを使うと一人分しか出せないし、return false;をしても同様。if文を組み合わせても何度もクリックできる状態です。disabled属性を使おうと試みましたが動かなくなったりしました。
9
- 子要素が1つ上にある場合は追加するような処理をしない方法があれば聞きたいです。
63
+ 子要素が1つ上にある場合は追加するような処理をしない方法があれば聞きたいです。
64
+ ### 補足情報(FW/ツールのバージョンなど)
65
+ ここにより詳細な情報を記載してください。

3

文法

2020/03/17 08:03

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- javascript for文で100人分表を出す
1
+ javascript for文で表を出す
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- htmlとjavascriptでクリックされたら100分の表を作成するプログラムを作成しています
3
+ htmlとjavascriptでクリックされたら100分の表を作成するプログラムを作成しています
4
4
 
5
5
 
6
6
 

2

文法

2020/03/04 08:11

投稿

t_t_t_t_t_t
t_t_t_t_t_t

スコア10

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

1

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

2020/02/21 07:42

投稿

t_t_t_t_t_t
t_t_t_t_t_t

スコア10

title CHANGED
File without changes
body CHANGED
@@ -13,7 +13,7 @@
13
13
  ### 該当のソースコード
14
14
 
15
15
  ```html
16
- <table id="table" type="button" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
16
+ <table id="table" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
17
17
  <thead>
18
18
  <tr id="row">
19
19
  <td bgcolor="#BA55D3" width="200">番号</td>