Dartlang: Wie kann man anklickbare Zeilen in einer Tabelle haben und auf eine bestimmte Zelle in der Tabelle zugreifen?

Question

Ich habe einen Dart-Code, der eine Tabelle aus einer Liste füllt. Hier ist der Code, bevor ich mein Problem zu erklären:

import 'dart:html'; 
import 'dart:convert'; 
import 'dart:async'; 

class RowData { 
    //Class for the values to be stored in each row 
    int studentId; 
    String name; 
    int math; 
    int science; 
} 

class Table { 
    static StreamController<int> controller = 
     new StreamController<int>.broadcast(); 
    Stream<int> updateStream = controller.stream; 

    List<RowData> rows = new List<RowData>(); //contains the default rows 
    List<String> downloadIds = 
     new List<String>(); //should contain the id's of the selected rows 

    TableElement table; 
    var tBody; 

    /* Takes in a List<Rows> of rows, draws a 
    * html Table, and returns it as a Table Element. 
    */ 
    TableElement drawTable() { 
    this.table = new TableElement(); 
    this.table.classes.add("events_table"); 
    this.tBody = this.table.createTBody(); 
    Element head = this.table.createTHead(); 
    head.style.backgroundColor = "#003B70"; 

    this.table.tHead.addRow() 
     ..insertCell(0).nodes.add(new Element.tag("div")..text = "Student ID") 
     ..insertCell(1).nodes.add(new Element.tag("div")..text = "Student Name") 
     ..insertCell(2).nodes.add(new Element.tag("div")..text = "Maths Score") 
     ..insertCell(3).nodes.add(new Element.tag("div")..text = "Science Score"); 

    for (int i = 0; i < rows.length; i++) { 
     this.tBody.insertRow(i) 
     ..insertCell(0).text = rows[i].studentId.toString() 
     ..insertCell(1).text = rows[i].name.toString() 
     ..insertCell(2).text = rows[i].math.toString() 
     ..insertCell(3).text = rows[i].science.toString() 
     ..onClick.listen((e) => downloadTrigger(e)); 
    } 
    return (this.table); 
    } 

    void decodeJson(String input) { 
    List decoded = JSON.decode(input); 

    for (int i = 0; i < decoded["ScoreReport"].length; i++) { 
     rows.add(new Row() 
     ..studentId = decoded["ScoreReport"][i]["studentId"] 
     ..name = decoded["ScoreReport"][i]["name"] 
     ..math = decoded["ScoreReport"][i]["math"] 
     ..science = decoded["ScoreReport"][i]["science"]); 
    } 
    } 

    downloadTrigger(Event e) { 
    var download_id = 
     ((e.target as Element).parent as TableRowElement).rowIndex; 
    print(download_id); 
    this.table.tBodies[0].rows[download_id].style.backgroundColor = "#4caf50"; 
    var test = this.table.tBodies[0].rows[download_id].nodes.toString(); 
    print(test); 
    } 
} 

Diese Klasse von einer anderen Klasse aufgerufen wird, die in einer JSON-Datei schicken würde, um zuerst die Zeilen zu füllen und ruft dann für die Tabellenfunktion, die Funktion zu zeichnen.

Momentan versuche ich, den Schülerbericht herunterzuladen, wenn ich zum Beispiel auf die entsprechende Zeile klicke, wenn jemand auf die dritte Zeile klickt, muss ich die Schülerkennung in der dritten Zeile und einmal bekommen können Ich bekomme die ID, ich weiß, wie man den Download auslöst.

Ich bin an der Stelle des Erhaltens der Studenten-ID, ich könnte den Knoten, wo der Benutzer geklickt bekommen, aber ich kann nicht mit diesem Knoten, weil zwei Studenten könnten den gleichen Namen oder die gleichen Punktzahlen, aber die IDs haben abweichen. Richtig, ich habe eine einfache Druckanweisung für die IDs, wenn ich versuche zu drucken, würde die Konsole ein "td" zeigen, was für mich einen Sinn ergibt. Ich bin neu in Dart und möchte hier Hilfe bekommen.

Einfach, wenn der Benutzer irgendwo in einer bestimmten Zeile klickt, brauche ich die Student ID in dieser Zeile.

Vielen Dank im Voraus, Entschuldigung für die lange Beschreibung.

Answer 1

So etwas sollte funktionieren, nachdem die Tabelle in den DOM hinzugefügt wurde:

ElementList rows = table.querySelectorAll('tr'); 
rows.onClick.listen((event) { 
    print(event.target.children[0].text); 
})