Q&A
そもそもjQuery本体は読み込まれてないようですが、コード全体提示いただけますか？
こんにちは！
僕は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}
ご教示していただけますと幸いです。
よろしくお願いいたします。
ご回答ありがとうございます。
どれがいいか、わかりませんが、以下のリンクをご参照くださませんか。
https://datatables.net/download/
それはdataTablesの本体です。
dataTablesはjQueryプラグインですよね。
でしたらjQueryライブラリ本体を読み込まないことには使えません。
ブラウザ開発ツールのコンソールにエラー出てませんか。
$ is not defined
ブラウンザーのコンソールにエラー件がありません。
読み込んだと思います。
>読み込んだと思います。
ええ、ですから既に書いたように「コード全体提示いただけますか？ 」
と聞いています。
書かれたコードが全て。一部だけ提示されても再現できません。
すみません。html本体を更新しました。jsの方は今の状態の全てです。
「なかなか想定に一致しません」とは、具体的には何が起きていますか？
結果（実際に起きたこと）を書きましょう
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
Lhankor_Mhy様、ご指摘ありがとうございます。質問内容をこうしんしました
質問変更拝読。
ただ、エラーは発生していました。
はい、データが置き換えされていなくて、重複になっています。
いえ、そうではなく、「エラーが発生しません」と書いてありましたが、下記の通り、変数宣言エラーが出ています。
まず、エラーメッセージの確認の仕方を「ディベロッパーツール」などでググって学習されることをお勧めします。
はい、承知しました。とても便利なのに、僕がわすれてしまい、すみません。
ご回答ありがとうございます。
「ブラウンザーのコンソールにエラー件がありません。」とあったので、見方知ってるのかと思ってました。
すみません。僕のミスで、読み込みの成果を判断してボタン押下する前にコンソールをチェックしたが、ボタン押下後にコンソールを確認しませんでした。
ん、結局どう解決したのでしょう？
https://teratail.com/help/question-tips#questionTips4-2
なんかコメント見ても解決した感がないのですが。
１つを解決できました。行ごとにステータス列の変化を見えるように修正する方法を検索しています。
回答1件
0
ベストアンサー
こんにちは。
「Pending」を表示してから、「NG、OKなど」に変更
let はブロックスコープなので、if文の中でしか使えません。
js
1// 宣言を変える let rowData = { 2 var rowData = {
投稿2020/09/30 08:26
総合スコア36074
ご回答ありがとうございます。
ステータスが変更しました。
Lhankor_Mhyさま、一括処理が終えてからデータの全てを表示されていますが、それぞれどんどん変化を見えるように待ち時間を追記しましたが、なかなまだ一括処理となっています。それを改善出来ますでしょうか。質問内容を更新したが、よければ、ご確認して頂けますと幸いです。
ベトナムの方なんですね。日本語お上手ですね。
Promise や async / await を使用することを検討した方がいいと思います。
はい。ベトナムでこのようなプラットフォームがなくて英語が下手なので、ここによく参考しています。お教えていただいてありがとうございます。そのように試します。
ああ、すいません、setTimeout を使う方が簡単でした。
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
回答ありがとうございます。両方とも試します。
あなたの回答
tips
プレビュー
