Javascript 如何单击按钮删除多行
我想在单击“删除”按钮时删除所选行。我的删除功能工作正常我面临的问题是最上面的删除按钮工作正常我的UI屏幕如下图所示 我使用复选框选择表行。如果我选择了所有三条记录,所有三个删除按钮都应该工作,任何删除按钮都可以删除所选行,但在我的情况下,只有第一个删除按钮工作。 这是我的html和js代码Javascript 如何单击按钮删除多行,javascript,java,html,jsp,button,Javascript,Java,Html,Jsp,Button,我想在单击“删除”按钮时删除所选行。我的删除功能工作正常我面临的问题是最上面的删除按钮工作正常我的UI屏幕如下图所示 我使用复选框选择表行。如果我选择了所有三条记录,所有三个删除按钮都应该工作,任何删除按钮都可以删除所选行,但在我的情况下,只有第一个删除按钮工作。 这是我的html和js代码 <td class="td-org">${entry.sORGID}</td> <td class="td-org">${entry.url}</td> &
<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);
}
${entry.sORGID}
${entry.url}
${entry.type}
测试
document.getElementById('btntest')。onclick=function(){
var selchbox=getSelectedChbox(this.form);//获取getSelectedChbox()返回的数组
var myvalue=JSON.stringify(selchbox);
//文件。写入(“复选框”+选择框);
$.ajax({
类型:“POST”,
url:“/delete”,
数据类型:“JSON”,
contentType:“应用程序/json;字符集=utf-8”,
数据:JSON.stringify(selchbox),
cache:false,
成功:功能(数据){
警惕(“成功!!!”);
},
错误:函数(args){
警报(“ajax帖子错误”);
}
});
//警报(选择框);
}
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(ele){
var selchbox=[];//将存储选定复选框值的数组
//获取frm中的所有输入标记及其编号
var inpfields=ele.getElementsByTagName('input');
var nr_inpfields=inpfields.length;
//遍历inpfields元素,并在selchbox中添加selected(checked)复选框的值
对于(var i=0;i您将事件绑定到id恰好是唯一的id
,因此,单击事件将仅适用于1个元素
要解决这个问题,您可以将类添加到delete
按钮中,并对它们进行迭代以绑定onclick
事件
HTML
<td class="td-org"><input type="button" value="Delete" class="delete-btn" />
<td class="td-org"><input type="button" value="Delete" onclick="myFunction()" />
JS
let btns = document.querySelectorAll('.delete-btn');
for(let i = 0; i < btns.length; i++) {
let btn= btns[i];
btn.onclick = function() {
// your code
}
}
function myFunction() {
// your code
}
您不应使用id作为多个按钮的选择器,因为要通过id正确选择,每个元素都应该是唯一的,并因此逐个选择。对于常见功能,当选择多个类似元素时,应改为使用class
请参阅正在删除对象数组的post getSelectedChbox方法和后端代码。