从各种“相同”按钮将值传递给onclick

我使用此代码生成HTML，显示从数据库中获取的各种成员的表，每个成员都有自己的编辑删除按钮。我希望每行都有一个与每个成员都有的id相同的唯一id。从各种“相同”按钮将值传递给onclick

function showMembers(member){ 
     member.forEach(function(x){ 
     let table = document.getElementById("memberTable") 
     let rowCount = table.rows.lenght; 
     let row = table.insertRow(rowCount); 
     row.id=x.memberId 
     let cell1 = row.insertCell(0); 
     let cell2 = row.insertCell(1); 
     let cell3 = row.insertCell(2); 
     let cell4 = row.insertCell(3); 
     row.insertCell(4).innerHTML = '<button type="button"> Edit </button>' 
     row.insertCell(5).innerHTML = '<button type="button" id="deleteButton" onclick ="deleteMember(this)"> Delete </button>' 
     document.getElementById("deleteButton").value=row.id 
     cell2.innerHTML = x.lastname; 
     cell3.innerHTML = x.address; 
     cell4.innerHTML = x.phone; 

     });}

当我点击删除按钮，它会调用这个函数，它位于一个不同的JavaScript文件

function deleteMember(Id) { 
      let url = config.servicesPath + "/member" 
      const ajax = new AJAXConnection(url) 
      ajax.onsuccess = viewMessage 
      ajax.del([Id]) 
      }

我怎么能正确地从每个按钮通过uique ID，并且到deleteMember功能？

来源

2016-09-16 Sebastian Rojas Tveita

我可以使用jQuery？ –

在文档中不能有多个具有相同ID“deleteButton”的按钮。最好不要使用'innerHTML'并正确创建按钮。 – Bergi

你有一个错字'let rowCount = table.rows.lenght;' - 它应该是'length'，而不是'lenght' –

在你的情况下，最简单的方式是使用row.id直接生成onclick处理程序：

row.insertCell(5).innerHTML = '<button type="button" id="deleteButton" onclick="deleteMember(' + row.id + ')"> Delete </button>'

注：上面是一个简单的例子，假设row.id是数字，否则你会想要逃避/序列化其值：How do I escape quotes in HTML attribute values?

来源

2016-09-16 10:00:41

只有当'row.id'序列化到正确的html和javascript时才有效。 – Bergi

@Bergi'row.id'似乎是一个整数，所以我没有看到任何问题。 –

如果涉及到这一点，为每个按钮生成唯一ID也是合理的： id =“deleteButton-'+ row.id +'” document.getElementById（“deleteButton”）可能会失败2+按钮。 – EternalLight

我会给按钮一个数据属性包含行ID并设置单击处理程序来使用它。

这将使HTML是这个样子：

<button onclick="deleteMember(this.getAttribute('data-rowid'))" class="delete-button" data-rowid="theid">delete</button>

来源

2016-09-16 10:16:34 Kris

从各种“相同”按钮将值传递给onclick

回答

相关问题