Q&A
そもそもidとはそのデータを特定するための番号ですから
安易に振り直してはいけませんが、idではなく単なる連番でよいということですか？
であれば行数-1でよいのでは？
現在、todoリストの作成をしているのですが、削除ボタンを押した時に、IDを更新して表示させたいのですが、更新方法がわからず詰まってしまっています
現在のコードが
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/todo.css"> 8 <title>Document</title> 9</head> 10 11<body> 12 <div class="radio_button"> 13 <input type="radio" name="syurui" checked="checked" id="radio1_1" onchange="radioChange()">すべて 14 <input type="radio" name="syurui" id="radio1_2" onchange="radioChange()">作業中 15 <input type="radio" name="syurui" id="radio1_3" onchange="radioChange()">完了 </div> 16 <div class="task"> 17 <table border="0" > 18 <thead> 19 <tr> 20 <td>ID</td> 21 <td>コメント</td> 22 <td>状態</td> 23 </tr> 24 </thead> 25 <tbody id="add_value"> 26 27 </tbody> 28 </table> 29 </div> 30 <header class="header"> 31 <h1 class="title">新規タスクの追加</h1> 32 </header> 33 <div class="textbox"> 34 <input type="text" id="add_text" value=""> 35 <input type="button" value="追加" class="add_task_button" id="add_btn"> 36 </div> 37 38 <script src="js/todo.js"></script> 39 40</body> 41 42</html>
javascript
1"use strict" 2 3const add_btn = document.getElementById("add_btn"); 4const add_value = document.getElementById("add_value"); 5 6const todos = []; 7 8const displayTodos = (todos) => { 9 add_value.textContent = ""; 10 todos.forEach((todo, index) => { 11 // console.log(`${index}: ${todo.Taskid}`); 12 const tr = document.createElement("tr"); //trを作成 13 const id_td = document.createElement("td"); //tdを作成 14 id_td.textContent = todo.Taskid; //id_tdに要素数をカウント 15 const comment_td = document.createElement("td"); 16 comment_td.innerHTML = todo.comment; 17 const status_td = document.createElement("td"); 18 const workButton = document.createElement("button"); 19 workButton.innerText = todo.status; 20 workButton.addEventListener("click", function () { 21 if (todo.status == "作業中") { 22 todo.status = "完了"; 23 } else { 24 todo.status = "作業中"; 25 } 26 displayTodos(todos); 27 }); 28 const removeButton = document.createElement("button"); 29 removeButton.innerText = "削除"; 30 const id_num = todos.length; 31 removeButton.addEventListener("click", function () { 32 todos.splice(index, 1); 33 displayTodos(todos); 34 }); 35 tr.appendChild(id_td); //id_tdをtrの子要素として追加 36 tr.appendChild(comment_td); //comment_tdをtrの子要素として追加 37 tr.appendChild(status_td); //status_tdをtrの子要素として追加 38 status_td.append(workButton); //workButtonをstatus_tdに追加 39 status_td.append(removeButton); 40 add_value.appendChild(tr); 41 const reset = document.getElementById("add_text"); 42 reset.value = ""; 43 44 }) 45} 46 47 48add_btn.addEventListener("click", function () { 49 const idNum = todos.length; 50 const text = document.getElementById("add_text").value; 51 const status = "作業中"; 52 const todo = { 53 Taskid: idNum, 54 comment: text, 55 status: status, 56 }; 57 todos.push(todo); 58 displayTodos(todos); 59});
css
1.workbtn{ 2 border-radius:5px; 3} 4 5.removebtn{ 6 margin-left: 10px; 7 border-radius: 5px; 8}
このようになっていま
そして、
javascript
1 removeButton.addEventListener("click", function () { 2 todos.splice(index, 1); 3 displayTodos(todos); 4 });
この部分に、配列に入っているオブジェクトtodoのTaskidを更新するコードを入れたいです
この写真のIDの部分を更新したいです
よろしくお願いします
回答1件
0
ベストアンサー
試していませんが
js
1//表示する前に番号を振りなおす 2todos.reduce ((no, todo)=> todo.Taskid = no + 1,0); 3displayTodos(todos);
コードを拝見しました。とても苦行でした。
そのおかげでやりたいことは想像できましたが...
正味数行のプログラムですので理解しやすいと思います。参考までに。
html&js
1<!DOCTYPE html> 2<meta charset="utf-8"> 3<title></title> 4 5<style> 6body { counter-reset: no;} 7tr th label:before { counter-increment: no; content: counter(no);} 8tbody tr:first-of-type {display: none;} 9 10#T.off tr.on, #T.on tr.off, 11tr.on td input[value="完了"], 12tr.off td input[value="作業中"] { display: none;} 13 14tr.on td input[value="作業中"], 15tr.off td input[value="完了"] { display: inline-block; } 16#T.on tr.on { display: table-row; } 17</style> 18 19 20<body> 21 <p> 22 <input type="radio" name="syurui" value="all" checked="checked">すべて 23 <input type="radio" name="syurui" value="on">作業中 24 <input type="radio" name="syurui" value="off">完了 25 <table border="1"> 26 <thead><tr><td>ID <td>コメント <td>状態 27 <tbody id="T"> 28 <tr> 29 <th><label></label> 30 <td><output name="cmt"> 31 <td> 32 <input type="button" value="作業中"> 33 <input type="button" value="完了"> 34 <input type="button" value="削除"> 35 </table> 36 <h1>新規タスクの追加</h1> 37 <p><input><input type="button" value="追加"></p> 38 39<script> 40const 41a = e=> { 42 let 43 t=e.closest('p').querySelector('input'), 44 f=T.appendChild(T.rows[0].cloneNode (true)); 45 f.querySelector('output').value = t.value; 46 t.value=''; 47 z(f,'on'); 48}, 49b = e=> T.className=e.value, 50y = e=> e.closest('tr').remove(), 51z = (e,s)=> e.closest('tr').className=s; 52 53document.addEventListener ('click',v=>{ 54 let e=v.target; 55 if('button'==e.type)switch(e.value){ 56 case '追加' :a(e);break; 57 case'作業中':z(e,'off');break; 58 case'完了':z(e,'on');break; 59 case'削除':y(e);break; 60 } 61 else if ('radio' == e.type && 'syurui'==e.name) b(e); 62},false); 63</script> 64
投稿2020/12/01 17:33
総合スコア616
できました
ありがとうございます????♂️
ちなみになんですが、これを配列のループ処理を使って書こうとしたらどのようなものになりますか？
例えばforeachを使ってやる場合などです
ご教授よろしくお願いします
todos.forEach ((todo, i)=> todo.Taskid = i + 1);
Array.reduce も Array.forEach の仲間です。
たかがインデクスを振るぐらいなcssに任せてよい。
勉強不足ですいません
cssに任せるとは、cssでindexと同じ動作をするものを書くということでしょうか？
参考にと思って書いたプログラムを実行して見てください。どこにも連番なんてありません。cssが行っています。ましてや配列(todos)さえもありません。短いコードなのですがやりたいことすべて機能していますよ。 createElement と appendChild を乱発するより、ひな形をコピーしながら追加するほうがスマートです。
なるほど
やってみます
ありがとうございました????♂️
あなたの回答
tips
プレビュー
