Question

我正在使用此代码生成HTML，显示从数据库中获取的各种成员的表，每个成员都有自己的编辑删除按钮。我希望每一行都有一个唯一的id，它等于每个成员的id。

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函数？

Answer 1

您的最简单模式是直接使用onclick生成row.id处理程序：

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?

Answer 2

我给按钮一个包含行id的数据属性，并设置单击处理程序以使用它。

这会让html看起来像这样：

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

通过各种“相同”按钮将值传递给onclick上的函数

2 个答案: