さまざまな "同一の"ボタンからonclickの関数に値を渡す

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]) 
      } 

どのように私が正しくdeleteMember関数にかけ、各ボタンからuique IDを渡すことができます上に配置され、この関数を呼び出すのだろうか？

Answer 1

あなたの場合における最も簡単なモードでは、直接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?

Answer 2

ボタンに行IDを含むデータ属性を与え、それを使用するクリックハンドラを設定します。 HTMLは次のようなものに見えるようになり

：

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