質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

936閲覧

ParentNodeを使用してtr要素を取得する方法

mikeikeikename

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/07 23:42

前提・実現したいこと

質問失礼します。
現在Todoリストを作成しておりますが、JavascriptでCSSのdisuplay="none"を用いて
要素の表示/非表示を行いたいと考えております。

発生している問題・エラーメッセージ

現状エラーメッセージは出ないのですが、
・タスクの状態ボタンを完了にし、チェックボックスを作業中にすると完了ボタンを消すことはできるが、タスク全体は消えない。

const doneParent = a.target.parentNode; doneParent.className = 'workDone'; } else { createButton.textContent = "作業中"; const workParent = a.target.parentNode; workParent.className = 'work';

ここを現状はButton要素に対してのアプローチになっていますが、tr要素にアプローチ出来ればタスク全体を非表示にできるのではないかと考えています。
ParentNoedeを使用して以下の部分を書き換えれば解決できるのかな、という大凡の目処は立てているのですが、tr要素の取得方法で悩んでいます。

workTasks.style.display = "none";

もし解決方法ご存知の方おられたらご教示のほど宜しくお願い致します。

該当のソースコード

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/style.css"> 8 <title>Todoリスト</title> 9</head> 10 11<body> 12 <h1>Todoリスト</h1> 13 <p> 14 <input type="radio" name="task" value="1" checked ="checked">全て 15 <input type="radio" id="radio-work" name="task" value="2">作業中 16 <input type="radio" id="radio-done" name="task" value="3">完了 17 </p> 18 <p></p> 19 <table> 20 <thead> 21 <th>ID</th> 22 <th>コメント</th> 23 <th>状態</th> 24 <th></th> 25 </thead> 26 <tbody class="addTask-target" id="tbody"></tbody> 27 </table> 28 <h2>新規タスクの追加</h2> 29 <input class="addTask-value" type="text" /> 30 <button class="addTask-trigger" type="button">追加</button> 31 <script src="js/main.js"></script> 32</body> 33 34</html>

Javascript

1 2{ 3 document.addEventListener('DOMContentLoaded', () => { 4 const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0]; 5 const addTaskTarget = document.getElementsByClassName('addTask-target')[0]; 6 const addTaskValue = document.getElementsByClassName('addTask-value')[0]; 7 const radioWork = document.getElementById('radio-work'); 8 const radioDone = document.getElementById('radio-done'); 9 let nextId = 0; 10 const todos = []; 11 12 //Taskとidを作成 13 const addTask = (task, id, tableItem) => { 14 const idSpanTd = document.createElement('td'); 15 const taskSpanTd = document.createElement('td'); 16 //タスク追加時にtodosにtodoを追加 17 const todo = { 18 task: 'taskSpanTd', 19 status: '作業中' 20 }; 21 todos.push(todo); 22 //要素内のHTML文章を変更する 23 idSpanTd.innerText = id; 24 taskSpanTd.innerText = task; 25 //生成したテーブル要素をブラウザに表示する 26 tableItem.append(idSpanTd); 27 tableItem.append(taskSpanTd); 28 addTaskTarget.append(tableItem); 29 }; 30 31 //Button要素を生成する 32 const addButton = (tableItem, removeButton, createButton) => { 33 const createButtonTd = document.createElement('td'); 34 const removeButtonTd = document.createElement('td'); 35 //要素内のHTML文章を変更する 36 createButton.innerText = '作業中'; 37 removeButton.innerText = '削除'; 38 //生成したテーブル要素をブラウザに表示する 39 tableItem.append(createButtonTd); 40 tableItem.append(removeButtonTd); 41 addTaskTarget.append(tableItem); 42 //生成したbutton要素を生成する 43 createButtonTd.append(createButton); 44 removeButtonTd.append(removeButton); 45 }; 46 47 //追加ボタンをクリックした際にtd要素を追加する処理を行う 48 addTaskTrigger.addEventListener('click', () => { 49 const task = addTaskValue.value; 50 const tableItem = document.createElement('tr'); 51 const removeButton = document.createElement('button'); 52 const createButton = document.createElement('button'); 53 addTask(task, nextId++, tableItem); 54 addButton(tableItem, removeButton, createButton); 55 addTaskValue.value = ''; 56 // //削除ボタンを押した時にタスクを削除する 57 const deleteElement = (a) => { 58 const tableTag = a.target.closest('tr'); 59 if (tableTag) tableTag.remove(); 60 updateId(); 61 } 62 removeButton.addEventListener('click', deleteElement, false); 63 64 //ボタンを押したら作業中、完了中と変わる 65 createButton.addEventListener('click', (a) => { 66 if (createButton.textContent === "作業中") { 67 createButton.textContent = "完了"; 68 const doneParent = a.target.parentNode; 69 doneParent.className = 'workDone';/*完了class*/ 70 } else { 71 createButton.textContent = "作業中"; 72 const workParent = a.target.parentNode; 73 workParent.className = 'work';/*作業中class*/ 74 } 75 }); 76 }) 77 78 /*ラジオボタン作業中を押下時の処理*/ 79 radioDone.addEventListener('click', function () { 80 const workTasks = document.getElementsByTagName('tr'); 81 workTasks = Array.from(workTasks); 82 if (radioWork.checked === true) { 83 workTasks.forEach(function (workTasks) { 84 workTasks.style.display = ""; 85 }) 86 } else { 87 workTasks.forEach(function (workTasks) { 88 workTasks.style.display = "none"; 89 }) 90 } 91 }) 92 93 // ラジオボタン完了押下時処理 94 radioWork.addEventListener('click', function () { 95 const doneTasks = document.getElementsByTagName('tr'); 96 doneTasks = Array.from(doneTasks); 97 if (radioDone.checked === true) { 98 doneTasks.forEach(function (doneTasks) { 99 doneTasks.style.display = ""; 100 }) 101 } else { 102 doneTasks.forEach(function (doneTasks) { 103 doneTasks.style.display = "none"; 104 }) 105 } 106 }) 107 108 // 連番 再振り直し 109 const updateId = () => { 110 const tbody = document.getElementsByTagName("tbody")[0]; 111 const taskList = tbody.getElementsByTagName('tr'); 112 nextId = 0; 113 Array.from(taskList, tr => { 114 tr.getElementsByTagName('td')[0].textContent = nextId; 115 nextId++ 116 }); 117 } 118 }); 119}

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/07/07 23:43

なぜparentNodeなのでしょうか?
guest

回答1

0

ベストアンサー

parentNodeは一つ親なので、もしparentNodeでやるならwhileで再帰的にやらないといけません

javascript

1a.target.closest('tr')

投稿2020/07/08 00:24

編集2020/07/08 00:25
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikeikeikename

2020/07/08 07:08

ありがとうございます。解決致しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問