teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ボタンを押下すると、データをテーブルに追記してからそのデータごとに更新する

編集履歴

質問編集履歴

3

質問内容更新

2020/09/30 08:57

投稿

TruoG91
TruoG91

スコア7

test CHANGED
File without changes
test CHANGED
@@ -6,15 +6,23 @@
6
6
 
7
7
  そして、以下のように実装していますが、なかなか想定に一致しません。
8
8
 
9
- 実際結果は「ステータス」列にて値が変わりません。
9
+ ~~実際結果は「ステータス」列にて値が変わりません。
10
10
 
11
11
  但し、僕が期待した結果が「ステータス」列に「Pending」を表示してから、「NG、OKなど」に変更していきます。
12
12
 
13
13
  以下のように実装してエラーが発生しませんが、期待のようにならないので、
14
14
 
15
- どのように改善すればいいでしょうか。
15
+ どのように改善すればいいでしょうか。~~
16
+
16
-
17
+ 上記の内容はLhankor_Mhy様の回答通り解決できました。
18
+
17
-
19
+ 但し、以下の実装だと、「Pending」のステータスを見えなく、
20
+
21
+ 「OK,NG」しか見えません。
22
+
23
+ 期待したのはPendingを見てから各列を変更していくなので、どうすれば解決でしょうか。
24
+
25
+ まだ勉強中なので、キーワードを調べようとしますが、参照できるものだけでいいですが、解決方法を教えていただけますと幸いです。
18
26
 
19
27
  ```html
20
28
 
@@ -106,6 +114,8 @@
106
114
 
107
115
  $("#add-student-btn").click(function() {
108
116
 
117
+ table.clear().draw()
118
+
109
119
  let infoTextArea = document.getElementById("text_area").value.trim();
110
120
 
111
121
  let studentInfoList = new Array();
@@ -144,11 +154,13 @@
144
154
 
145
155
  for ( i = 0; i < studenNum; i++) {
146
156
 
147
- // こちらにはRowごとに変更したいです。
157
+ // tại đây em muốn check từng tên rồi update kết quả status
148
158
 
149
159
  let checkNameStudent = checkStudent(studentInfoList[i])
150
160
 
151
- table.row.add(checkNameStudent).draw();
161
+ table.row(i).data(checkNameStudent).draw();
162
+
163
+
152
164
 
153
165
  }
154
166
 
@@ -164,9 +176,11 @@
164
176
 
165
177
  let studentName = data["name"];
166
178
 
179
+ sleep(5000);
180
+
167
181
  if (studentName == "Tommy") {
168
182
 
169
- let rowData = {
183
+ var rowData = {
170
184
 
171
185
  "no": data["no"],
172
186
 
@@ -178,7 +192,7 @@
178
192
 
179
193
  } else {
180
194
 
181
- let rowData = {
195
+ var rowData = {
182
196
 
183
197
  "no": data["no"],
184
198
 
@@ -194,6 +208,24 @@
194
208
 
195
209
  }
196
210
 
211
+
212
+
213
+ function sleep(milliseconds) {
214
+
215
+ var start = new Date().getTime();
216
+
217
+ for (var i = 0; i < 1e7; i++) {
218
+
219
+ if ((new Date().getTime() - start) > milliseconds){
220
+
221
+ break;
222
+
223
+ }
224
+
225
+ }
226
+
227
+ }
228
+
197
229
  ```
198
230
 
199
231
 

2

質問内容更新

2020/09/30 08:57

投稿

TruoG91
TruoG91

スコア7

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,16 @@
6
6
 
7
7
  そして、以下のように実装していますが、なかなか想定に一致しません。
8
8
 
9
+ 実際結果は「ステータス」列にて値が変わりません。
10
+
11
+ 但し、僕が期待した結果が「ステータス」列に「Pending」を表示してから、「NG、OKなど」に変更していきます。
12
+
13
+ 以下のように実装してエラーが発生しませんが、期待のようにならないので、
14
+
15
+ どのように改善すればいいでしょうか。
16
+
17
+
18
+
9
19
  ```html
10
20
 
11
21
  <!DOCTYPE html>
@@ -186,6 +196,8 @@
186
196
 
187
197
  ```
188
198
 
199
+
200
+
189
201
  ご教示していただけますと幸いです。
190
202
 
191
203
  よろしくお願いいたします。

1

html本体を更新しました

2020/09/30 08:14

投稿

TruoG91
TruoG91

スコア7

test CHANGED
File without changes
test CHANGED
@@ -8,33 +8,67 @@
8
8
 
9
9
  ```html
10
10
 
11
- <textarea type="text" name="text_area" id="text_area"></textarea>
11
+ <!DOCTYPE html>
12
12
 
13
- <table id="student-info-table">
13
+ <html>
14
14
 
15
- <thead>
15
+ <head>
16
16
 
17
- <td>No</td>
17
+ <title>Datatable demo</title>
18
18
 
19
- <td>Name</td>
19
+ </head>
20
20
 
21
- <td>Status</td>
22
21
 
23
- </thead>
24
22
 
25
- </table>
23
+ <body>
26
24
 
27
- <div>
25
+ <textarea type="text" name="text_area" id="text_area"></textarea>
28
26
 
29
- <button id="add-student-btn">Add</button>
27
+ <table id="student-info-table">
30
28
 
31
- </div>
29
+ <thead>
32
30
 
33
- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
31
+ <td>No</td>
34
32
 
35
- <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
33
+ <td>Name</td>
36
34
 
37
- <script src="./index.js"></script>
35
+ <td>Status</td>
36
+
37
+ </thead>
38
+
39
+ </table>
40
+
41
+ <div>
42
+
43
+ <button id="add-student-btn">Add</button>
44
+
45
+ </div>
46
+
47
+ </body>
48
+
49
+
50
+
51
+ <!-- Bootstrap -->
52
+
53
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
54
+
55
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
56
+
57
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
58
+
59
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
60
+
61
+
62
+
63
+ <!-- DataTable -->
64
+
65
+ <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
66
+
67
+ <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
68
+
69
+ <script src="./index.js"></script>
70
+
71
+ </html>
38
72
 
39
73
  ```
40
74