Come aggiungere righe a TableElement in Dart?

Question

Sto giocando con Dart, e sto provando a creare un nuovo TableElement con un'intestazione e una riga nel tbody.

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"; 

Sfortunatamente, entrambe le file finiscono nella sezione thead. Per di più, se lascio solo

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"; 

riga arriva a tbody sezione, come previsto. Qualche idea? Dart SDK 9474.

Answer 1

Nel tuo esempio, aggiungi la prima riga direttamente nell'intestazione della tabella che hai creato. Ma la seconda fila, si sta tentando di aggiungere direttamente nel vostro tavolo (non nella vostra TBODY)

Prova il seguente:

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"; 

Come accennato nei commenti, attualmente Dart: html libreria non supporta tavolo elementi di intestazione. In quanto tale deve essere fatto un po 'di lavoro. Le intestazioni CREATE TABLE è possibile utilizzare il seguente:

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 ... 

Nota tuttavia che l'insertAdjacentElement non funziona per Firefox (come hanno scelto di non attuare tale metodo JavaScript). E alternativa è quella di utilizzare:

headerRow.nodes.add(cell); 

Si noti che questo è un lavoro in giro e non consente per l'indicizzazione allo stesso modo come insertCell e coinvolge molto più lavoro per creare le celle singolarmente. Ciò fornisce un modo per aggirare i due bug elencati nei commenti risolti.

Answer 2

Il seguente codice ha funzionato bene con me:

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";