Q&A
回答ありがとうございます。
thead/tbodyに切り分けるにはどうやってtbodyを入れれば良いのでしょうか？
前提・実現したいこと
jsを使って、ヘッダー以外のtableの全削除をしたいです。
for文を使って1番下から繰り返し消していこうと思ったのですが、
「TypeError: Cannot read property 'todolists' of null」と出てきてしまいます。
なぜでしょうか？
このエラーメッセージの対処法と、解決法を教えていただけると幸いです。
よろしくおねがいします。
発生している問題・エラーメッセージ
html
1<html> 2 <head> 3 <meta carset="UTF-8"> 4 <title>ToDoリスト</title> 5 <link rel="stylesheet" href="style.css"> 6 </head> 7<body> 8 <!-- ---------------------------------------------------------------- --> 9<h1>ToDoリスト</h1> 10 11<div class="form-box"> 12 <table class="form"> 13 <tr> 14 <th>予定</th> 15 <td><input id="todo" type="text" placeholder="予定を入力" value="予定"></td> 16 <th>日時</th> 17 <td><input id="date" type="datetime-local"></td> 18 </tr> 19 <tr> 20 <th>お金</th> 21 <td><input id="price" type="text" placeholder="金額を入力" value="10000"></td> 22 <th>期日</th> 23 <td><input id="duedate" type="datetime-local"></td> 24 </tr> 25 <tr> 26 <th>持ち物</th> 27 <td><input id="item" type="text" value="持ち物"></td> 28 <th>メモ</th> 29 <td><input id="memo" type="text" value="めもです"></td> 30 </tr> 31 </table> 32 <div id="addButton"><button type="submit">登録する</button></div> 33 <div id="clearButton"><button type="submit">選択削除</button></div> 34 <div id="allclearButton"><button type="submit" onclick="deleteAll()">すべて削除</button></div> 35<!--ーーーーーーーーーーーーーーーーーーーーーー この上のボタン ーーーーーーーーーーーーーーーーーーーーーーーーー --> 36 37 38</div> 39 40<table class="main-table"> 41 <tr class="table-header"> 42 <th class="header-check"></th> 43 <th class="header-id">ID</th> 44 <th class="header-todo">予定</th> 45 <th class="header-date">日時</th> 46 <th class="header-price">お金</th> 47 <th class="header-duedate">期日</th> 48 <th class="header-item">持ち物</th> 49 <th class="header-memo">メモ</th> 50 <th class="header-check"></th> 51 </tr> 52</table>
JavaScript
1var j = 1; 2document.getElementById("addButton").onclick = function(){ 3const todo =document.getElementById('todo').value//予定 4const date =document.getElementById('date').value//日時 5const price =document.getElementById('price').value//お金 6const duedate =document.getElementById('duedate').value//期日 7const item =document.getElementById('item').value//持ち物 8const memo =document.getElementById('memo').value//メモ 9 10let todolists = [todo,date,price,duedate,item,memo]; 11console.log(todolists); 12mainTable = document.querySelector('.main-table')// テーブル要素を取得する 13row = mainTable.insertRow(-1) //テーブルに行を追加してその行を返す 14todolists.unshift(j); 15 16 17for (var i = 0; i < 7; i++){ 18cell = row.insertCell(-1) //行に <td> を追加して、その<td>を返す 19cell.textContent = todolists[i] // <td>内にテキストを入れる。 20} 21var checkbox = row.insertCell(0); 22var clearbtn = row.insertCell(-1); 23checkbox.innerHTML = "<input type='checkbox'>"; 24clearbtn.innerHTML = '<input type="button" value="行削除" onclick="deleteRow(this)">'; 25j += 1; 26console.log(j); 27} 28 29function deleteRow(obj) { 30 // 削除ボタンを押下された行を取得 31 tr = obj.parentNode.parentNode; 32 // trのインデックスを取得して行を削除する 33 tr.parentNode.deleteRow(tr.sectionRowIndex); 34} 35////////////////////////////////////////ここから下が違う///////////////////////////// 36 37function deleteAll() { 38 var table = document.getElementById("table"); 39 var rowLen = table.todolists.length; 40 for (var i = rowLen-1; i > 0; i--) { 41 table.deleteRow(i); 42 } 43}
補足情報
ここにより詳細な情報を記載してください。
回答3件
0
var table = document.getElementById("table");
var rowLen = table.todolists.length;
tableというidを持つ要素はhtmlを見る限りありませんし（だからof null）、あったとしてtodolistsというプロパティは与えられてないと思います。
「列数」が知りたいのでしたら、あまり凝ってない構成ですし、trのlengthで良いのでは？
投稿2021/06/23 06:45
総合スコア80875
0
エラーメッセージのとおりです。
document.getElementById("table")が何も見つからずnullになっています。
投稿2021/06/23 06:45
総合スコア146018
0
ベストアンサー
ヘッダが固定であればthead/tbodyで切り分けた方がよいでしょう。
javascript
1document.querySelector('tbody').innerHTML="";
でデータ部分はクリアできます
投稿2021/06/23 06:58
総合スコア116724
失礼しました、ご提示のソースだとtheadになるtrがないのですね
であればtbodyだけ設定するかtableのinnerHTMLを""にしてください
初心者で何度もすみません。。。
function deleteAll(){
table.innerHTML = ""
}
こういうことでしょうか？
考え方はそうです
document.querySelector('table').innerHTML = ""
なるほど！
動作はしたのですが、別の所のtableが消えてしまいました。。。
jsで追加したものの指定はどうすればよいのでしょうか。。。？
＞別の所のtableが消えてしまいました
複数テーブルがあるなら、ユニークに指定できるようにidを振るなど
工夫して下さい
わかりました！頑張ってみます。
色々と有難うございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/23 10:32