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正确选择的每个元素都应该是唯一的，因此应一一选择。对于通用功能，当要选择多个类似元素时，应使用 class 。

推荐this

单击按钮如何删除多行

2 个答案: