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

【问题标题】：How to delete mulitple rows on click of a button如何在单击按钮时删除多行
【发布时间】：2018-10-31 06:44:29
【问题描述】：

我想在单击删除按钮时删除选定的行。我的删除功能工作正常我面临的问题只是最上面的删除按钮正在工作我的 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;
}

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

我在这里缺少什么？

【问题讨论】：

发布 getSelectedChbox 方法和删除对象数组的后端代码。

标签： javascript java html jsp button

【解决方案1】：

您正在与 id 绑定事件，这恰好是唯一的，因此，单击事件仅适用于 1 个元素。

要解决这个问题，您可以向delete 按钮添加类。并遍历它们以绑定onclick 事件。

HTML

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

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()" />

function myFunction() {
  // your code
}

【讨论】：

【解决方案2】：

您不应该使用 id 作为多个按钮的选择器，因为每个元素，为了被 id 正确选择，都应该是唯一的，因此会被一一选择。对于通用功能，当需要选择多个相似的元素时，应该使用 class 来代替。

参考this

【讨论】：