Wie fügt man Zeilen zu TableElement in Dart hinzu?

Question

Ich spiele mit Dart, und ich versuche, ein neues TableElement mit einer Kopfzeile und einer Zeile im tbody zu erstellen.

TableElement table = new TableElement(); 

    Element head = table.createTHead(); 
    TableRowElement headerRow = table.tHead.insertRow(-1); 
    headerRow.insertCell(0).text = "9"; 
    headerRow.insertCell(1).text = "aaa"; 
    headerRow.insertCell(2).text = "bbb"; 
    headerRow.insertCell(3).text = "ccc"; 

    var tBody = table.createTBody(); 
    TableRowElement newLine = table.insertRow(-1); // add at the end 
    newLine.insertCell(0).text = "9"; 
    newLine.insertCell(1).text = "aaa"; 
    newLine.insertCell(2).text = "bbb"; 
    newLine.insertCell(3).text = "ccc"; 

Leider enden beide Zeilen im thead-Abschnitt. Hinzu kommt, dass, wenn ich nur

TableElement table = new TableElement(); 

    var tBody = table.createTBody(); 
    TableRowElement newLine = table.insertRow(-1); // add at the end 
    newLine.insertCell(0).text = "9"; 
    newLine.insertCell(1).text = "aaa"; 
    newLine.insertCell(2).text = "bbb"; 
    newLine.insertCell(3).text = "ccc"; 

die Zeile verlassen wird, Abschnitt TBODY wie erwartet. Irgendwelche Ideen? Dart SDK 9474.

Answer 1

In Ihrem Beispiel fügen Sie die erste Zeile direkt in den Tabellenkopf ein, den Sie erstellt haben. Aber die zweite Reihe, versuchen Sie direkt in Ihrer Tabelle hinzuzufügen (nicht in Ihre TBody)

Versuchen Sie Folgendes:

TableElement table = new TableElement(); 

// ... See below ... 

var tBody = table.createTBody(); 
TableElement newLine = tBody.insertRow(-1); 
newLine.insertCell(0).text = "9"; 
newLine.insertCell(1).text = "aaa"; 
newLine.insertCell(2).text = "bbb"; 
newLine.insertCell(3).text = "ccc"; 

Wie in den Kommentaren erwähnt, derzeit dart: HTML-Bibliothek nicht unterstützt Tabelle Kopfzeilenelemente. Daher muss ein bisschen Arbeit erledigt werden. Die erstellen Tabellenüberschriften können Sie die folgende verwenden:

Element head = table.createTHead(); 
TableRowElement headerRow = table.tHead.insertRow(-1); 
var cell = new Element.tag('th'); 
cell.text = '9'; 
headerRow.insertAdjacentElement('beforeend', cell); 
cell = new Element.tag('th'); 
cell.text = 'aaa'; 
headerRow.insertAdjacentElement('beforeend', cell); 
cell = new Element.tag('th'); 
cell.text = 'bbb'; 
headerRow.insertAdjacentElement('beforeend', cell); 
cell = new Element.tag('th'); 
cell.text = 'ccc'; 
headerRow.insertAdjacentElement('beforeend', cell); 

// ... See above ... 

ist jedoch zu beachten, dass die insertAdjacentElement nicht für Firefox funktioniert (da sie nicht die JavaScript-Methode zur Implementierung gewählt haben). Und Alternative zu bedienen:

headerRow.nodes.add(cell); 

Beachten Sie, dass dies eine Arbeit um und erlaubt es nicht, für die Indizierung in der gleichen Weise wie insert und beinhaltet viel mehr Arbeit, um die Zellen individuell zu erstellen. Dies bietet eine Umgehung der beiden in den Kommentaren aufgelisteten Fehler.

Answer 2

Der Code unten arbeitete gut mit mir:

TableElement table2 = new TableElement(); 
table2.style.width='100%'; 
var tBody2 = table2.createTBody(); 

table2.tHead.insertRow(-1)..insertCell(0).nodes.add(new Element.tag('th')..text = '1') 
         ..insertCell(1).nodes.add(new Element.tag('th')..text = '2') 
         ..insertCell(2).nodes.add(new Element.tag('th')..text = '3') 
         ..insertCell(3).nodes.add(new Element.tag('th')..text = '4'); 

tBody2.insertRow(0)..insertCell(0).text = "9" 
       ..insertCell(1).text = "aaa" 
       ..insertCell(2).text = "bbb" 
       ..insertCell(3).text = "ccc"; 

tBody2.insertRow(1)..insertCell(0).text = "9" 
       ..insertCell(1).text = "aaa" 
       ..insertCell(2).text = "bbb" 
       ..insertCell(3).text = "ccc"; 

tBody2.insertRow(2)..insertCell(0).text = "9" 
       ..insertCell(1).text = "aaa" 
       ..insertCell(2).text = "bbb" 
       ..insertCell(3).text = "ccc";