IDs der Tabellenzeilen übergeben

Question

Die folgende Frage könnte für die meisten von Ihnen einfach sein. Aber ich beginne gerade JavaScript und ich würde wirklich schätzen, wenn jemand mich in die richtige Richtung zeigen könnte.

Ich habe eine normale HTML-Tabelle, wo jede Zeile ihre eigene ID hat. Was ich erreichen möchte ist, dass jedes Mal, wenn ich auf einen Link in einer Zeile klicke, die ID für diese Zeile in einer Variablen gespeichert und später an eine Funktion übergeben werden soll. Lassen Sie uns sagen, ich klicke Zeile 1, dann ID 1 sollte übergeben werden und so weiter ... Wie kann ich das erreichen?

Vielen Dank.

Answer 1

Dies sollte funktionieren:

var currentRowID, table = document.getElementById('your-table'); 
var rows = table.rows; 
var row_count = rows.length; 

for(var i = 0; i < row_count; i++) { 
    rows[i].onclick = function() { 
     currentRowID = this.id; 
     //do something with currentRowID here... 
    }; 
} 

jsFiddle example

Answer 2

Wenn Sie sich für einen Event-Handler anordnen Klicks reagieren zu können, wird der Browser so einrichten, dass Sie herausfinden können, was Element geklickt wurde (die "Ziel" des Ereignisses). In Ihrem Javascript, könnten Sie etwas tun, vorausgesetzt, Ihre <table> auf der Seite die einzige Tabelle ist:

function handleRowClicks(e) { 
    e = e || window.event; 
    if (!e.target.tagName.toLowerCase() === "tr") return; 
    var rowId = e.target.id; 
    /* 
    whatever you want to do goes here 
    */ 
} 

// To set up the event handler, do this in your "window.onload" or some 
// other initialization point 

document.getElementsByTagName("table")[0].onclick = handleRowClicks; 

Dies ist nur eine von einer Reihe verschiedenen Ansätze ist. Wenn Sie ein Javascript-Framework/eine Bibliothek verwenden würden, würde es wahrscheinlich etwas einfacher werden, aber nicht viel.

Beachten Sie, dass dieser Ansatz die Klicks auf der Ebene <table> anstelle der Zeilen selbst behandelt. Das spart ein wenig Initialisierungsaufwand.

Answer 3

Ähnlich dem anderen Beispiel ist hier, wie Sie dies in reinem JavaScript tun könnte:

// Pure JavaScript: 
var table = document.getElementById("table-one"); 
var rows = table.rows; 
var length = rows.length; 

for(var i = 0; i < length; i++) { 
    rows[i].onclick = function() { 
     alert(this.id); 
     // Do more stuff with this id. 
    } 
} 

Meiner Meinung nach ist dieses besondere Problem durch jQuery sehr gut gelöst. Wenn Sie ähnliche Operationen ausführen, spart Ihnen jQuery eine Menge Zeit und hält die Komplexität Ihres Codes niedrig. Vergleichen Sie die oben mit diesem:

// jQuery: 
$("#table-one tr").bind("click", function() { 
    alert(this.id); 
}); 

bind ist eine jQuery-Methode, die nur, na ja, ein Ereignis zu einem Handler :)

Arbeitsprobe bindet: http://jsfiddle.net/andrewwhitaker/9HEQk/

Answer 4

Der einfachste Weg, das zu tun ist jQuery-Framework verwenden.

// Your function 
function MyFunc(rowId){ 
    alert(rowId); 
} 
// Binde click event to all rows with class "ClockableRow" 
// within table with class "clickableTable" 
$(".clickableTable .clickableRow").click(function(){ 
    // Call you function and pass clicked row ID there 
    MyFunc($(this).attr("id")); 
}) 

Sie Tabelle shoul wie folgt aussehen:

<table class="clickableTable"> 
    <tr id="row1" class="clickableRow"><td>row 1</td></tr> 
    <tr id="row2" class="clickableRow"><td>row 2</td></tr> 
    <tr id="row3" class="clickableRow"><td>row 3</td></tr> 
    <tr id="row4" class="clickableRow"><td>row 4</td></tr> 
    <tr id="row5" class="clickableRow"><td>row 5</td></tr> 
</table> 

example