Dynamische Einstellung einer ID zu einer Schaltfläche in js

Question

Ich habe eine Tabelle, die von Firebase ausgefüllt wird. Ich habe Schaltflächen, die an jede Zeile in der Tabelle angehängt sind. Das Problem ist, ich weiß nicht, wie man die Knöpfe untereinander unterscheidet.

in ios würden Sie dies in einem cellForRowAtIndex tun in Ihrer Wähler

UIButton *aButton=[[UIButton alloc]initWithFrame:aFrame]; 
aButton.tag= A_BUTTON_TAG_CONSTANT + indexPath.row; 

Dann würden Sie bestimmen, welche Taste in der Tableview gedrückt wurde und man konnte die Aktion auf dem rechten Teil der Daten umgehen. In meiner Web App habe ich folgendes.

function myCreateFunction(order) { 
var table = document.getElementById("ordersTable"); 
var row = table.insertRow(0); 
var cell1 = row.insertCell(0); 
var cell2 = row.insertCell(1); 
var cell3 = row.insertCell(2); 
var cell4 = row.insertCell(3); 
cell1.innerHTML = order.addressType; 
cell2.innerHTML = order.totalPrice; 
for(i in order.address) { 
    var aCell=row.insertCell(i+3); 
    aCell.innerHTML=order.address[i]; 
console.log (i, order.address[i]) 
} 
var timeSince=makeTimeStamp(order.timeStamp); 
var row = table.rows[index]; 
cell3.innerHTML=timeSince; 
cell4.innerHTML = '<input id="Button" type="button" value="click"  onclick="return btntest_onclick()" />'; 

} 

Diese Methode wird jedes Mal aufgerufen, wenn ein "child_added" -Ereignis auftritt. So wächst der Tisch wie ein Stapel mit den neuesten auf der Oberseite. Der neueste Snapshot würde also in Zeile 0 und der älteste in Zeile n stehen, wobei n die Anzahl der Snapshots ist.

Jetzt würde ich gerne wissen, welche Taste in der Tabelle gedrückt wurde, so dass ich auf eine andere Seite gehen und Details bezüglich der Post anzeigen kann. Wie kann ich also wissen, welcher Knopf gedrückt wurde und welche Reihe anvisiert wurde?

Answer 1

In Ihrer Funktion halten Sie den Code außer letzte Zeile, das heißt -

var table = document.getElementById("ordersTable"); 
var row = table.insertRow(0); 
var cell1 = row.insertCell(0); 
var cell2 = row.insertCell(1); 
var cell3 = row.insertCell(2); 
var cell4 = row.insertCell(3); 
cell1.innerHTML = order.addressType; 
cell2.innerHTML = order.totalPrice; 
for(i in order.address) { 
    var aCell=row.insertCell(i+3); 
    aCell.innerHTML=order.address[i]; 
    console.log (i, order.address[i]) 
} 
var timeSince=makeTimeStamp(order.timeStamp); 
var row = table.rows[index]; 
cell3.innerHTML=timeSince; 

dies Dann schreiben:

bearbeitet

var button = document.createElement("button"); 
button.addEventListener("click", function(){ 
    myclickFunction(row); 
}, false); 
cell4.appendChild(button); 

Ihre myClickFunction wird, wie folgend:

//this function will be called for the each cell4 button and would contain that cell's row info 
function myclickFunction(clickedRow){ 
    //do something with the row info of clicked button and form payload for rest api 
    var payload = formPayload(clickedRow); //the payload formed from the clicked row 
    sendAjaxOfThisRow(payload); 
} 

Auf diese Weise müssen Sie keine ID hinzufügen und unnötige DOM-Manipulationen durchführen.

Answer 2

So fand schließlich die Lösung. Ich habe Vineets Lösung für den Button verwendet. Seine Lösung war jedoch unvollständig. Die Hauptsache, die ich erreichen wollte, besteht darin, auf die Informationen in der Tabellenzeile zuzugreifen, für die die Schaltfläche ausgewählt wurde. Es wurde auf diese Weise erreicht. in meinem Button-Selektor habe ich folgende

function myclickFunction() 
{ 
var idex = $(this).closest('tr').index(); 
var idex1 = $(this).closest('tr').find('td:eq(0)').text(); 
var idex2 = $(this).closest('tr').find('td:eq(1)').text(); 
var idex3 = $(this).closest('tr').find('td:eq(2)').text(); 
//alert(document.getElementById("ordersTable").rows[0].innerHTML); 
alert('<p><b>index:</b>' + idex + ' ' + idex1 + ' ' + idex2 + ' ' + idex3 + '</p>'); 
} 

Ich fand diese Lösung woanders. Obwohl es nicht wirklich ein Analog zu iOS erstellt; es ist das beabsichtigte Verhalten. es scheint mir der Anruf am nächsten kommt der Eltern in irgendeiner Weise. Dies ruft den Text der Tabellenzeilen ab und löst das Problem. hoffe das hilft jemandem