如何在单击按钮时删除多行

Question

我想在点击删除按钮时删除所选行。 我的删除功能正常工作我面临的问题是只有最顶层的删除按钮正在工作我的UI屏幕如下所示

我使用复选框选择表格行。 如果我选择所有三个记录全部三个删除按钮应该工作，任何删除按钮可以删除所选行但在我的情况下只有第一个删除按钮工作。 这是我的html和js代码。

<td class="td-org">${entry.sORGID}</td>
<td class="td-org">${entry.url}</td>
<td class="td-org">${entry.type}</td>
<td class="td-org"><a href="" onclick="testing("")" />Testing</td>
<td class="td-org"><input type="button" value="Delete" id="btntest" />

document.getElementById('btntest').onclick = function(){
      var selchbox = getSelectedChbox(this.form);     // gets the array returned by getSelectedChbox()
    var myvalue = JSON.stringify(selchbox);
     //document.write("check check"+selchbox);
      $.ajax({
            type: "POST",
            url: "/delete",
            dataType : "JSON",
            contentType:"application/json; charset=utf-8",
            data: JSON.stringify(selchbox),
            cache: false,
            success: function (data) {
                         alert("SUCCESS!!!");
                     },
                     error: function (args) {
                         alert("Error on ajax post");
                     }

        });
      //alert(selchbox);
    }

getSelectedChbox代码

function getSelectedChbox(ele) {
  var selchbox = [];        // array that will store the value of selected checkboxes

  // gets all the input tags in frm, and their number
  var inpfields = ele.getElementsByTagName('input');
  var nr_inpfields = inpfields.length;

  // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox

  for(var i=0; i<nr_inpfields; i++) {
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
    //selchbox = JSON.stringify({'selchbox' : selchbox});


  }

  return selchbox;
}

在控制器中我正在执行删除

我在这里缺少什么？

Answer 1

你是id绑定事件，恰好是唯一的，因此，click事件只适用于1个元素。

要解决此问题，您可以将类添加到delete按钮。 并迭代它们以绑定onclick事件。

HTML

<td class="td-org"><input type="button" value="Delete" class="delete-btn" />

JS

let btns = document.querySelectorAll('.delete-btn');
for(let i = 0; i < btns.length; i++) {
   let btn= btns[i];
   btn.onclick = function() {
       // your code
   }
}

或者，您可以在脚本中使用一个函数，并在html中onclick该函数。

HTML

<td class="td-org"><input type="button" value="Delete" onclick="myFunction()" />

JS

function myFunction() {
  // your code
}

Answer 2

你不应该使用id作为多个按钮的选择器，因为每个元素，为了被id正确选择，应该是唯一的，因此逐个选择。 对于共同的功能，当待选择的多个类似的元件类应该被代替使用。

参考这个