\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n```\r\nindex.jsは以下のようになっています。\r\n```javascript\r\nconst table = $('#student-info-table').DataTable({\r\n columns: [\r\n {data: 'no'},\r\n {data: 'name'},\r\n {data: 'status'}\r\n ]\r\n});\r\n\r\n\r\n$(\"#add-student-btn\").click(function() {\r\n table.clear().draw()\r\n let infoTextArea = document.getElementById(\"text_area\").value.trim();\r\n let studentInfoList = new Array();\r\n infoTextArea = infoTextArea.split(\"\\n\");\r\n let studenNum = infoTextArea.length;\r\n\r\n let i;\r\n for ( i = 0; i < studenNum; i++) {\r\n let name = infoTextArea[i];\r\n\r\n let studentInfo = {\r\n \"no\": i,\r\n \"name\": name,\r\n \"status\": \"pending\"\r\n };\r\n\r\n table.row.add(studentInfo).draw();\r\n studentInfoList.push(studentInfo);\r\n }\r\n for ( i = 0; i < studenNum; i++) {\r\n // tại đây em muốn check từng tên rồi update kết quả status\r\n let checkNameStudent = checkStudent(studentInfoList[i])\r\n table.row(i).data(checkNameStudent).draw();\r\n \r\n }\r\n\r\n});\r\n\r\n\r\nfunction checkStudent(data) {\r\n let studentName = data[\"name\"];\r\n sleep(5000);\r\n if (studentName == \"Tommy\") {\r\n var rowData = {\r\n \"no\": data[\"no\"],\r\n \"name\": data[\"name\"],\r\n \"status\": \"OK-passed\"\r\n };\r\n } else {\r\n var rowData = {\r\n \"no\": data[\"no\"],\r\n \"name\": data[\"name\"],\r\n \"status\": \"NG-failed\"\r\n };\r\n }\r\n return rowData;\r\n}\r\n\r\nfunction sleep(milliseconds) {\r\n var start = new Date().getTime();\r\n for (var i = 0; i < 1e7; i++) {\r\n if ((new Date().getTime() - start) > milliseconds){\r\n break;\r\n }\r\n }\r\n}\r\n```\r\n\r\nご教示していただけますと幸いです。\r\nよろしくお願いいたします。","answerCount":1,"upvoteCount":0,"datePublished":"2020-09-30T07:43:31.887Z","dateModified":"2020-09-30T08:57:04.881Z","acceptedAnswer":{"@type":"Answer","text":"こんにちは。\r\n\r\n>「Pending」を表示してから、「NG、OKなど」に変更\r\n\r\nlet はブロックスコープなので、if文の中でしか使えません。\r\n\r\n```js\r\n// 宣言を変える let rowData = {\r\n var rowData = {\r\n```\r\n\r\n参考：\r\n[let - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let)","dateModified":"2020-09-30T08:26:08.426Z","datePublished":"2020-09-30T08:26:08.426Z","upvoteCount":1,"url":"https://teratail.com/questions/295068#reply-416924"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/JavaScript","name":"JavaScriptに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/295068","name":"ボタンを押下すると、データをテーブルに追記してからそのデータごとに更新する"}}]}}}
teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問ボタンを押下すると、データをテーブルに追記してからそのデータごとに更新する

Q&A

解決済

1回答

1361閲覧

ボタンを押下すると、データをテーブルに追記してからそのデータごとに更新する

TruoG91
TruoG91

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/09/30 07:43

編集2020/09/30 08:57

0

0

こんにちは！
僕はHTML＋JavaScriptを勉強し始めです。
今、テーブルに関する処理を上記のタイトルのように動作しようとしております。
そして、以下のように実装していますが、なかなか想定に一致しません。
実際結果は「ステータス」列にて値が変わりません。
但し、僕が期待した結果が「ステータス」列に「Pending」を表示してから、「NG、OKなど」に変更していきます。
以下のように実装してエラーが発生しませんが、期待のようにならないので、
どのように改善すればいいでしょうか。
上記の内容はLhankor_Mhy様の回答通り解決できました。
但し、以下の実装だと、「Pending」のステータスを見えなく、
「OK,NG」しか見えません。
期待したのはPendingを見てから各列を変更していくなので、どうすれば解決でしょうか。
まだ勉強中なので、キーワードを調べようとしますが、参照できるものだけでいいですが、解決方法を教えていただけますと幸いです。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>Datatable demo</title>
5    </head>
6
7    <body>
8        <textarea  type="text" name="text_area" id="text_area"></textarea>
9        <table id="student-info-table">
10            <thead>
11                <td>No</td>
12                <td>Name</td>
13                <td>Status</td>
14            </thead>
15        </table>
16        <div>
17            <button id="add-student-btn">Add</button>
18        </div>
19    </body>
20
21    <!-- Bootstrap -->
22    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
23    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
24    <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>
25    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
26
27    <!-- DataTable -->
28    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
29    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
30    <script src="./index.js"></script>
31</html>

index.jsは以下のようになっています。

javascript
1const table = $('#student-info-table').DataTable({
2    columns: [
3        {data: 'no'},
4        {data: 'name'},
5        {data: 'status'}
6    ]
7});
8
9
10$("#add-student-btn").click(function() {
11    table.clear().draw()
12    let infoTextArea = document.getElementById("text_area").value.trim();
13    let studentInfoList = new Array();
14    infoTextArea = infoTextArea.split("\n");
15    let studenNum = infoTextArea.length;
16
17    let i;
18    for ( i = 0; i < studenNum; i++) {
19        let name = infoTextArea[i];
20
21        let studentInfo = {
22            "no": i,
23            "name": name,
24            "status": "pending"
25        };
26
27        table.row.add(studentInfo).draw();
28        studentInfoList.push(studentInfo);
29    }
30    for ( i = 0; i < studenNum; i++) {
31        // tại đây em muốn check từng tên rồi update kết quả status
32        let checkNameStudent = checkStudent(studentInfoList[i])
33        table.row(i).data(checkNameStudent).draw();
34        
35    }
36
37});
38
39
40function checkStudent(data) {
41    let studentName = data["name"];
42    sleep(5000);
43    if (studentName == "Tommy") {
44        var rowData = {
45            "no": data["no"],
46            "name": data["name"],
47            "status": "OK-passed"
48        };
49    } else {
50        var rowData = {
51            "no": data["no"],
52            "name": data["name"],
53            "status": "NG-failed"
54        };
55    }
56    return rowData;
57}
58
59function sleep(milliseconds) {
60    var start = new Date().getTime();
61    for (var i = 0; i < 1e7; i++) {
62      if ((new Date().getTime() - start) > milliseconds){
63        break;
64      }
65    }
66}

ご教示していただけますと幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806
m.ts10806

2020/09/30 07:46

そもそもjQuery本体は読み込まれてないようですが、コード全体提示いただけますか？
TruoG91
TruoG91

2020/09/30 07:50

ご回答ありがとうございます。 どれがいいか、わかりませんが、以下のリンクをご参照くださませんか。 https://datatables.net/download/
m.ts10806
m.ts10806

2020/09/30 07:51

それはdataTablesの本体です。 dataTablesはjQueryプラグインですよね。 でしたらjQueryライブラリ本体を読み込まないことには使えません。 ブラウザ開発ツールのコンソールにエラー出てませんか。 $ is not defined
TruoG91
TruoG91

2020/09/30 07:55

ブラウンザーのコンソールにエラー件がありません。 読み込んだと思います。
m.ts10806
m.ts10806

2020/09/30 07:58

>読み込んだと思います。 ええ、ですから既に書いたように「コード全体提示いただけますか？ 」 と聞いています。 書かれたコードが全て。一部だけ提示されても再現できません。
TruoG91
TruoG91

2020/09/30 08:03

すみません。html本体を更新しました。jsの方は今の状態の全てです。
Lhankor_Mhy
Lhankor_Mhy

2020/09/30 08:08 編集

「なかなか想定に一致しません」とは、具体的には何が起きていますか？ 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3
TruoG91
TruoG91

2020/09/30 08:15

Lhankor_Mhy様、ご指摘ありがとうございます。質問内容をこうしんしました
Lhankor_Mhy
Lhankor_Mhy

2020/09/30 08:26

質問変更拝読。 ただ、エラーは発生していました。
TruoG91
TruoG91

2020/09/30 08:35

はい、データが置き換えされていなくて、重複になっています。
Lhankor_Mhy
Lhankor_Mhy

2020/09/30 08:40

いえ、そうではなく、「エラーが発生しません」と書いてありましたが、下記の通り、変数宣言エラーが出ています。
Lhankor_Mhy
Lhankor_Mhy

2020/09/30 08:41

まず、エラーメッセージの確認の仕方を「ディベロッパーツール」などでググって学習されることをお勧めします。
TruoG91
TruoG91

2020/09/30 08:48

はい、承知しました。とても便利なのに、僕がわすれてしまい、すみません。 ご回答ありがとうございます。
m.ts10806
m.ts10806

2020/09/30 08:49

「ブラウンザーのコンソールにエラー件がありません。」とあったので、見方知ってるのかと思ってました。
TruoG91
TruoG91

2020/09/30 08:51

すみません。僕のミスで、読み込みの成果を判断してボタン押下する前にコンソールをチェックしたが、ボタン押下後にコンソールを確認しませんでした。
TruoG91
TruoG91

2020/10/01 08:36

１つを解決できました。行ごとにステータス列の変化を見えるように修正する方法を検索しています。
guest

回答1件

0

ベストアンサー

こんにちは。

「Pending」を表示してから、「NG、OKなど」に変更

let はブロックスコープなので、if文の中でしか使えません。

js
1// 宣言を変える       let rowData = {
2        var rowData = {

参考：
let - JavaScript | MDN

投稿2020/09/30 08:26

Lhankor_Mhy
Lhankor_Mhy

総合スコア37634

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TruoG91
TruoG91

2020/09/30 08:35

ご回答ありがとうございます。 ステータスが変更しました。
TruoG91
TruoG91

2020/09/30 09:01

Lhankor_Mhyさま、一括処理が終えてからデータの全てを表示されていますが、それぞれどんどん変化を見えるように待ち時間を追記しましたが、なかなまだ一括処理となっています。それを改善出来ますでしょうか。質問内容を更新したが、よければ、ご確認して頂けますと幸いです。
Lhankor_Mhy
Lhankor_Mhy

2020/09/30 09:18

ベトナムの方なんですね。日本語お上手ですね。 Promise や async / await を使用することを検討した方がいいと思います。
TruoG91
TruoG91

2020/09/30 09:24

はい。ベトナムでこのようなプラットフォームがなくて英語が下手なので、ここによく参考しています。お教えていただいてありがとうございます。そのように試します。
TruoG91
TruoG91

2020/09/30 09:44

回答ありがとうございます。両方とも試します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップJavaScriptに関する質問

ボタンを押下すると、データをテーブルに追記してからそのデータごとに更新する