Dartlang：テーブル内でクリック可能な行を持ち、テーブル内の特定のセルにアクセスする方法

Question

私はダーツコードを持っています。これはリストからテーブルを埋めます。私は私の問題を説明する前に、ここでのコードは次のとおりです。

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

このクラスは、最初の行を移入して、表関数は、関数を描画するために呼び出すためにJSONファイルで送信することになる別のクラスによって呼び出されます。

今、私は3行目をクリックした場合など、それぞれの行をクリックすると学生レポートをダウンロードしようとしています.3行目と1度にStudent IDを取得する必要があります私はIDを取得、私はダウンロードをトリガーする方法を知っている。

私は学生IDを取得する時点で打たれましたが、ユーザーがクリックしたノードを取得できましたが、2人の学生が同じ名前または同じスコアを持つ可能性があるため、異なる。私はIDのシンプルなプリントステートメントを持っていることを知っています。印刷しようとすると、コンソールは "td"を表示してくれます。私はダーツが新しく、これについていくつかの助けをしたいと思います。

ユーザーが特定の行のどこかをクリックするだけで、その行にStudent Idが必要です。

おかげさしで、長い説明をお詫び申し上げます。テーブルがDOMに追加された後、このような

Answer 1

何か作業をする必要があります：

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