QRコードで取得した文字列が、すでに表に入っているかどうか確かめたい

QRコードで取得した文字列が、すでに表に入っているかどうか確かめて、入っている場合その文字列と同じ行に時間を追加したいです。

テキストエリアの文字を、ボタンをクリックすると文字列にして、時間と一緒に表に追加しました。

ボタンを押したとき、下に新しく追加して行くようにしているのですが、既に表に同じものがあれば、その文字列がある行に新しくcellを追加したいです。

お忙しいところすみませんが、ご回答いただけたら、幸いです。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.2, maximum-scale=4,user-scalable=yes"> <script> function clickBtn1(){ let time = new Date(Date.now()); let M = String(time.getMonth() + 1).padStart(2, '0'); let d = String(time.getDate()).padStart(2, '0'); let h = String(time.getHours()).padStart(2, '0'); let m = String(time.getMinutes()).padStart(2, '0'); let s = String(time.getSeconds()).padStart(2, '0'); let qrname1 = document.form1.qrname.value; // document.getElementById("school").textContent = qrname1; let table = document.getElementById("table"); let row = table.insertRow(-1); let cell1 = row.insertCell(-1); let cell2 = row.insertCell(-1); let cell3 = row.insertCell(-1); cell1.textContent = qrname1; cell2.textContent = `${M}/${d}/${h}:${m}:${s}`; if (String(qrname1).equals(cell1)) { cell3.textContent = `${M}/${d}/${h}:${m}:${s}`; } } </script> </head> <body> <p>ピントを合わせて、QRコードをカメラ映像の赤枠内にあわせると読み取ります</p> <div><canvas id="preview"></canvas></div> <form name="form1"> <textarea id="qr" rows="8" cols="40" name="qrname"></textarea> </form> <div><input type="button" value="登録" onclick="clickBtn1()"></div>  <table id="table"> <thead> <tr> <th>学校</th> <th>出発時間</th> <th>終了時間</th> </tr> </thead> <tbody> <tr> <td></td> <td id="starttime"></td> <td></td> </tr> </tbody> </table> </body> </html>

試したこと

qrname1という文字列が追加したcell1と一致している場合で、書いたのですが、そもそも、cell1にqrname1という文字列を入れているので、この書き方自体があっているかをいろいろ調べたのですが、わかりませんでした..

＜7/29/12:05追記＞
登録ボタンを押すと、テキストエリアの文字が、<th>学校</th>という場所に追加されます。それと同時に同じ行の<th>出発時間</th>に現在時刻を追加するようにしました。

登録ボタンをもう一度押したとき、すでに<th>学校</th>の中に同じ文字列があっても、下にどんどん追加されてしまうので、文字列が同じだったら、<th>終了時間</th>のところに時間を追加したいのですが、if文がうまく作動してくれないです。

＜7/31/13:39追記＞
clickBtnの関数に書き加えをしました。
html内の<th>終了時間</th>を消しました。

function clickBtn1(){
let time = new Date(Date.now());
let M = String(time.getMonth() + 1).padStart(2, '0');
let d = String(time.getDate()).padStart(2, '0');
let h = String(time.getHours()).padStart(2, '0');
let m = String(time.getMinutes()).padStart(2, '0');
let s = String(time.getSeconds()).padStart(2, '0');

let qrname1 = document.form1.qrname.value;
// document.getElementById("school").textContent = qrname1;
// let table = document.getElementById("table");
// let row = table.insertRow(-1);

let cells = document.querySelectorAll("#school");
let cellsArray = Array.from(items);

if (cellArray.contains(qrname1)) {
  
  let table = document.getElementById("table");
  let rowCnt = table.rows.length;
  let colCnt = table.rows[0].cells.length;
  let th = document.createElement('th');
  table.rows[0].appendChild(th);
  table.rows[0].cells[colCnt].innerHTML = "終了時間";
  let cell3 = row.insertCell(-1);
  cell3.textContent = `${M}/${d}/${h}:${m}:${s}`;
  
} else {
  let table = document.getElementById("table");
  let row = table.insertRow(-1);
  let cell1 = row.insertCell(-1);
  let cell2 = row.insertCell(-1);
  cell1.textContent = qrname1;
  cell2.textContent = `${M}/${d}/${h}:${m}:${s}`;
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2021/07/29 02:58

HTMLがないとコードが把握できなさそうです。

Lhankor_Mhy

2021/07/29 03:00

また、ご提示のコードでどのような問題が起きているのかも記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、String に equals() というメソッドはありません。
==などで比較してください。

次に、if文で判定をする前に行を追加しているので、同じ文字列があっても行が追加されてしまいます。
行を追加するのは文字列を探した後にしてください。

そして、cell1 は追加したセルなので、必ずqrname1と一致してしまいます。
既存のセルを参照したいなら、document.querySelectorAll()などで既存のセルを取得して検索してください。

わからないことがあれば、コメント欄でお知らせください。

投稿2021/07/29 03:28

編集2021/07/29 03:29

Lhankor_Mhy

総合スコア36960

Takeru-Ono

2021/07/29 05:10

返信遅れて申し訳ないです。迅速な対応をしていただき本当にありがとうございます。実際にやってみます！

Lhankor_Mhy

2021/07/29 05:12

質問を閉じるのは、問題が解決してからで構いませんよ。

Takeru-Ono

2021/07/31 04:39

丁寧にありがとうございます。初めて使ったので閉じてしまいました。日が少し空いてしまい申し訳ないのですが、 quarySelectorAllで検索し、配列にした後、その配列内に同じ文字列を含むかどうかでif文を書きました。 trueだった場合新たに列を作ればいいのではと思ったのですが、うまくいかないので、もう一度見てもらうことは可能でしょうか？追加したコードは新しく追記しました。

Lhankor_Mhy

2021/07/31 05:45

ひとまず、 let cellsArray = Array.from(items); ↓ let cellsArray = Array.from(cells); if (cellArray ↓ if (cellsArray だと思います。開発者ツールでエラーメッセージを見ることを覚えると、先に進むことができるのではないでしょうか。

Takeru-Ono

2021/08/05 11:09

返信遅くなり申し訳ございません。今まで開発者ツールあまり見ていなかったのですが、エラーをなくしていくと動くようになりました！完成ではないですが進むことができました！助言していただき本当にありがとうございます。

行動規範の内容に同意します