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

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

ただいまの
回答率

87.48%

todolist チェックボックスにチェックが入っている時に、選択削除ボタンを押したら削除できるようにしたい

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 342

score 7

javascriptのtableタグにチェックボックスが付いています
フレームワークを使わず、動的にtbodyを追加しtbodyの中に入っているチェックボックスがあります
このチェックボックスにチェックが入っている蘭を、選択削除ボタンをクリックして削除できるようにしたいです

htmlで以下のコードがあったとします
<table>
<thead id="tHeader">
<tr>
<th class="thBox"></th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
<script src="app.js"></script>

//js
//少しコードを省略

start.addEventListener('click', () => {
const tRecord = document.createElement('tr')
tBody.appendChild(tRecord)
const tId = document.createElement('td')
tRecord.appendChild(thBox)

const tCheck = document.createElement('td')
const tInput = document.createElement('input')
tInput.type = 'checkbox'
tCheck.appendChild(tInput)
tRecord.appendChild(tCheck).classList.add('center')

//これがわからない
const selectionDeleteButton = () => {
const deleteButton = document.createElement('button');
deleteButton.textContent = '選択削除';
deleteButton.addEventListener('click', () => {
todos.splice(tRecord, 1);
showTodos();
});
return deleteButton; 
};

選択削除の仕方わかる方いらしたら、ご教授願います

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

他人様の書いたものは助長すぎて理解できないことが多いですね。
テーブルの最初の行を雛型にします。そして隠しておきます。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>to do list ?</title>

<style>
tbody tr:first-of-type { display: none;}
tr td:first-of-type { text-align: center;}
</style>

<body>
<table border="1">
  <tbody id="TB">
    <tr>
      <td><input name="chk" type="checkbox" value="on">
      <td><output name="job"></output>
      <td><output name="job2"></output>
      <td><button>選択削除</button>
</table>

<script>
const
  RECS = [
    {chk: 'on', job: 'あきらめたか?', job2: '多分そう'},
    {chk: null, job: '新規登録は?', job2: '未実装'},
    {chk: null, job: 'レコードの読み込み方法は?', job2:'新たに質問するべきかAjaxか'},
    {chk: null, job: 'レコードの保存方法は?', job2:'クッキーじゃないでしょう'},
  ];


function replaceTable (tbody, recs) {
  let [first, ...other] = tbody.rows;
  other.forEach (e=> e.remove ());

  for (let rec of recs) {
    let
      tr = tbody.appendChild (first.cloneNode (true)),
      io = tr.querySelectorAll ('*[name]');

    for (let e of io)
      if (rec.hasOwnProperty (e.name))
        /checkbox|radio/.test (e.type)
        ? e.checked = e.value == rec[e.name]
        : e.value = rec[e.name];
  }
}

function delRec (no) {
  RECS.splice (no, 1);
}


function delRow (e) {
  let tr = e.closest ('tr');
  if (tr) {
    if (tr.querySelector ('td:first-of-type input[type="checkbox"]:checked')) {
      delRec (tr.rowIndex - 1);
      tr.remove ();
      replaceTable (TB, RECS);
    }
  }
}


function handler (event) {
  let e = event.target;
  if ('BUTTON' === e.tagName) {
    if ('選択削除' === e.textContent) {
      delRow (e);
    }
    event.preventDefault ();
  }
}

//________________
replaceTable (TB, RECS);
document.addEventListener ('click', handler, false);

</script>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • JavaScriptに関する質問
  • todolist チェックボックスにチェックが入っている時に、選択削除ボタンを押したら削除できるようにしたい