JavaScriptからチェックボックスを追加

bugfix> javascript > 投稿 2020-12-26 16:10

空のページのみを含むHTMLページがあります <div id="data"></div> そしてjavascriptでは、ajaxを介してデータベースから情報を取得し、それをjavascriptに戻してから、 <div id="data"></div>

データを列に設定しました。別の列を追加する場合、この列をクリックするとボタンが含まれ、行が削除されます。（私はajaxを介して削除を行い、それを戻す方法などを知っています。）しかし問題は、どうすればボタンを実行できるかということです。

中に追加すると div = data 一度印刷されますが、JavaScriptファイル内に追加すると、クリックリスナーを追加できなくなります。どうすればよいですか。

       let printItems = document.getElementById("data");
  function succes(user) {
        let info = "<div class='infoTable'>";
        for (let i = 0; i < user.length; i++) {
            info += "<div class='info'>";
            info += "<div class='fcol'>" + (i+1) + "</div>";
            info += "<div class='scol'>" + user[i].name + "</div>"; 
            info += "<div class='tcol'>" + user[i].quantity + "</div>";
            info += "I NEED TO ADD THE BUTTON HERE TO HAVE user[i].ID";
            info += "</div>";
        }
        info += "</div>";
        printinfo.innerHTML = info;
    }

<div id="data"></div>

さて、あなたは難しい部分をしました。あなたが探しているものは非常に簡単であり、あなたはそれを複数の方法で行うことができます。私はあなたに私にもっと簡単な方法を提案することができます。行を（UIとajaxから）削除する関数を記述します。ここでの問題は、行ごとにその関数を呼び出す方法です。だからあなたは添付することができます onclick 作成したすべての行の関数。例えば：
```
info += '<button onclick="deleteRowFunction"> Delete This<button />';
```
これで、ボタンをクリックするたびに、削除関数が呼び出されます。しかし、どの関数が呼び出されるかを決定する方法は？これは、次の方法で解決できます。
```
info += '<button onclick="deleteRowFunction(\'' + user[i].ID + '\')"> Delete This<button />';
```
他の簡単な方法は使用することです data- 属性：

例えば：
```
info += '<button data-userId=' + user[i].ID + ' onclick="deleteRowFunction"> Delete This<button />';
```
このようにして、 ID の中に deleteRowFunction 。あなたはここですべての詳細を読むことができます

const user = [{
  name: "ABC",
  quantity: 2,
}, {
  name: "XYZ",
  quantity: 1,
}, {
  name: "abcdef",
  quantity: 12,
}];
let printItems = document.getElementById("data");
function deleteButton(e){
  const targetButton = e.target;
  targetButton.parentElement.parentElement.remove();
}
function succes(user) {
  let info = "<div class='infoTable'>";
  
  for (let i = 0; i < user.length; i++) {
    info += `<div class='info'>
               <div class='fcol'>${(i + 1)}</div>
               <div class='scol'>${user[i].name}</div>
               <div class='tcol'>${user[i].quantity}</div>
               <div class='tcol'><button onclick="deleteButton(event)">Delete</div>
             </div>`;
  }
  
  info += "</div>";
  printItems.innerHTML = info;
}
succes(user);

<div id="data"></div>

bugfix

JavaScriptからチェックボックスを追加

javascript

php

html

関連記事