前提・実現したいこと
jsで追加したチェックボックスにチェックを入れて、
「削除ボタン」をクリックしたら、その行が削除される
という動きをしたいです。
とりあえず書いてあるものは以下のとおりです。
ですがチェックを入れた後にそのチェックを外しても削除されてしまいます。
ほかにいい方法などありますか?
発生している問題・エラーメッセージ
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta carset="UTF-8"> 5 <title>ToDoリスト</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8<body> 9 10<h1>ToDoリスト</h1> 11 12<div class="form-box"> 13 <table class="form"> 14 <tr> 15 <th>予定</th> 16 <td><input id="todo" type="text" placeholder="予定を入力" value="予定"></td> 17 <th>日時</th> 18 <td><input id="date" type="datetime-local"></td> 19 </tr> 20 <tr> 21 <th>お金</th> 22 <td><input id="price" type="text" placeholder="金額を入力" value="10000"></td> 23 <th>期日</th> 24 <td><input id="duedate" type="datetime-local"></td> 25 </tr> 26 <tr> 27 <th>持ち物</th> 28 <td><input id="item" type="text" value="持ち物"></td> 29 <th>メモ</th> 30 <td><input id="memo" type="text" value="めもです"></td> 31 </tr> 32 </table> 33 <div id="addButton"><button type="submit">登録する</button></div> 34 <div id="clearButton"><button type="submit" onclick="deleteCheck()" >選択削除</button></div> 35 <div id="allclearButton"><button type="submit" onclick="deleteAll()">すべて削除</button></div> 36</div> 37 38<table class="main-table" id="table"> 39 <tr id="table-header"> 40 <th class="header-check"></th> 41 <th class="header-id">ID</th> 42 <th class="header-todo">予定</th> 43 <th class="header-date">日時</th> 44 <th class="header-price">お金</th> 45 <th class="header-duedate">期日</th> 46 <th class="header-item">持ち物</th> 47 <th class="header-memo">メモ</th> 48 <th class="header-check"></th> 49 </tr> 50</table> 51 52<script src="app.js"></script> 53</body> 54</html> 55
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 16for (var i = 0; i < 7; i++){ 17cell = row.insertCell(-1) //行に <td> を追加して、その<td>を返す 18cell.textContent = todolists[i] // <td>内にテキストを入れる。 19} 20var checkbox = row.insertCell(0); 21var clearbtn = row.insertCell(-1); 22checkbox.innerHTML = '<input type="checkbox" onchange="selectRow(this)"/>'; 23clearbtn.innerHTML = '<input type="button" value="行削除" onclick="deleteRow(this)">'; 24j += 1; 25console.log(j); 26} 27 28// 削除用配列 29let ch = []; 30function selectRow(obj) { 31 // 削除ボタンを押下された行配列に追加 32 ch.push(obj); 33} 34 35function deleteRow(obj) { 36 // 削除ボタンを押下された行を取得 37 tr = obj.parentNode.parentNode; 38 // trのインデックスを取得して行を削除する 39 tr.parentNode.deleteRow(tr.sectionRowIndex); 40} 41 42// function deleteCheck() { 43// var table = document.getElementById("table"); 44// var rowLen = table.rows.length; 45// if(rowLen = true){ 46// table.deleteRow(this); 47// } 48// }; 49document.getElementById("clearButton").onclick = function(){ 50 deleteSelect(); 51 } 52 function deleteSelect() { 53 var table = document.getElementById("table"); 54 for(i in ch){ 55 const obj = ch[i]; 56 index = obj.parentNode.parentNode.sectionRowIndex; 57 table.deleteRow(index) 58 } 59 ch = []; 60 } 61 62 63function deleteAll() { 64 var table = document.getElementById("table"); 65 var rowLen = table.rows.length; 66 for (var i = rowLen-1; i > 0; i--) { 67 table.deleteRow(i); 68 } 69}; 70
補足情報
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー