How to get tr element using ParentNode

Question

Use the check boxes to display the tasks that have the active button pressed when you click the "In Progress" check, and the completion button when you click the "Complete" check.

I am trying to implement that only the tasks that are present are displayed. Currently, when the check box is set to "Complete", "Button only" is hidden.

I have tried the following:

const doneTasks = document.getElementsByTagName('tr');

I tried to get the tr element as above, but it didn't work. I am thinking that if I get the tr element, the entire task will be hidden, while the button element has been obtained to hide it now.

Please tell me to someone.

{
  document.addEventListener('DOMContentLoaded', () => {
    const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
    const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
    const addTaskValue = document.getElementsByClassName('addTask-value')[0];
    const radioWork = document.getElementById('radio-work'); 
    const radioDone = document.getElementById('radio-done');
    let nextId = 0;
    const todos = [];

    //Taskとidを作成
    const addTask = (task, id, tableItem) => {
      const idSpanTd = document.createElement('td');
      const taskSpanTd = document.createElement('td');
      //タスク追加時にtodosにtodoを追加 
      //要素内のHTML文章を変更する
      idSpanTd.innerText = id;
      taskSpanTd.innerText = task;
      //生成したテーブル要素をブラウザに表示する
      tableItem.append(idSpanTd);
      tableItem.append(taskSpanTd);
      addTaskTarget.append(tableItem);
    };

    //Button要素を生成する
    const addButton = (tableItem, removeButton, createButton) => {
      const createButtonTd = document.createElement('td');
      const removeButtonTd = document.createElement('td');
      //要素内のHTML文章を変更する
      createButton.innerText = '作業中';
      removeButton.innerText = '削除';
      //生成したテーブル要素をブラウザに表示する
      tableItem.append(createButtonTd);
      tableItem.append(removeButtonTd);
      addTaskTarget.append(tableItem);
      //生成したbutton要素を生成する
      createButtonTd.append(createButton);
      removeButtonTd.append(removeButton);
    };

    //追加ボタンをクリックした際にtd要素を追加する処理を行う
    addTaskTrigger.addEventListener('click', () => {
      const task = addTaskValue.value;
      const tableItem = document.createElement('tr');
      const removeButton = document.createElement('button');
      const createButton = document.createElement('button');
      addTask(task, nextId++, tableItem);
      addButton(tableItem, removeButton, createButton);
      addTaskValue.value = '';
      // //削除ボタンを押した時にタスクを削除する
      const deleteElement = (a) => {
        const tableTag = a.target.closest('tr');
        if (tableTag) tableTag.remove();
        updateId();
      }
      removeButton.addEventListener('click', deleteElement, false);

      //ボタンを押したら作業中、完了中と変わる
      createButton.addEventListener('click', (a) => {
        if (createButton.textContent === "作業中") {
          createButton.textContent = "完了";
          const doneParent = a.target.parentNode;
          doneParent.className = 'workDone';/*完了class*/
        } else {
          createButton.textContent = "作業中";
          const workParent = a.target.parentNode;
          workParent.className = 'work';/*作業中class*/
        }
      });
    })
    
    //todoの状態を管理
    const todo = [{task: 'taskSpanTd',status: '作業中'},{task: 'taskSpanTd',status: '完了'}]
    todos.push(todo);

    /*ラジオボタン作業中を押下時の処理*/
    radioDone.addEventListener('click', function () {
      let workTasks = document.getElementsByClassName('work');
      workTasks = Array.from(tr);
      if (radioWork.checked.tr=== true) {
        workTasks.forEach(function (workTasks) {
          workTasks.style.display = "";
        })
      } else {
        workTasks.forEach(function (workTasks) {
          workTasks.style.display = "none";
        })
      }
    })

    // ラジオボタン完了押下時処理
    radioWork.addEventListener('click', function () {
      let doneTasks = document.getElementsByClassName('workDone');
      doneTasks = Array.from(tr);
      if (radioDone.checked.tr === true) {
        doneTasks.forEach(function (doneTasks) {
          doneTasks.style.display = "";
        })
      } else {
        doneTasks.forEach(function (doneTasks) {
        doneTasks.style.display = "none";
        })
      }
    })

    //　連番　再振り直し
    const updateId = () => {
      const tbody = document.getElementsByTagName("tbody")[0];
      const taskList = tbody.getElementsByTagName('tr');
      nextId = 0;
      Array.from(taskList, tr => {
        tr.getElementsByTagName('td')[0].textContent = nextId;
        nextId++
      });
    }
  });
}

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Todoリスト</title>
</head>

<body>
  <h1>Todoリスト</h1>
  <p>
    <input type="radio" name="task" value="1" checked ="checked">全て
    <input type="radio" id="radio-work" name="task" value="2">作業中
    <input type="radio" id="radio-done" name="task" value="3">完了
  </p>
  <p></p>
  <table>
    <thead>
      <th>ID</th>
      <th>コメント</th>
      <th>状態</th>
      <th></th>
    </thead>
    <tbody class="addTask-target" id="tbody"></tbody>
  </table>
  <h2>新規タスクの追加</h2>
  <input class="addTask-value" type="text" />
  <button class="addTask-trigger" type="button">追加</button>
  <script src="js/main.js"></script>
</body>

</html>

Answer 1

It's not good idea to select the tr tag by using it parent for example you can select child elements of div like

var div = document.getElementById('parent');
div.firstElementChild.style.background = 'red';
div.lastElementChild.style.background = 'blue';

#parent {
  width: 100px;
  height: 100px;
  position: relative;
}

.child {
  width: 100%;
  height: 50%;
}

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

but this can't be done on table if you you do it you will not point only one tr it will be applied on all tr like the following example

  table = document.getElementsByTagName('table')[0];
  table.firstElementChild.style.background = 'grey';
  table.lastElementChild.style.background = 'green';

<table border="1px" cellpadding="5px">
  <tr>
    <th>Names</th>
  </tr>
  <tr>
    <td>Eric</td>
  </tr>
  <tr>
    <td>Ivan</td>
  </tr>
</table>

so better select all table row in table and loop on the to get one by one like

tr = document.getElementsByTagName('tr');
for (var i = 0; i < tr.length; i++) {
  if (i == 0) {
    tr[i].style.background = 'green';
  } else if (i == 1) {
    tr[i].style.background = 'grey';
  } else {
    tr[i].style.background = 'cyan';
  }
}

<table border="1px" cellpadding="5px">
  <tr>
    <th>Names</th>
  </tr>
  <tr>
    <td>Eric</td>
  </tr>
  <tr>
    <td>Ivan</td>
  </tr>
</table>