¿Cómo agregar filas a TableElement en Dart?

Question

Estoy jugando con Dart, y estoy tratando de crear un nuevo TableElement con un encabezado y una fila en el 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"; 

Desafortunadamente, ambas filas terminan en la sección thead. Además de eso, si dejo solamente

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

la fila llega a tbody sección, como se esperaba. ¿Alguna idea? Dart SDK 9474.

Answer 1

En el ejemplo, está agregando la primera fila directamente en el encabezado de la tabla que ha creado. Pero la segunda fila, que están tratando de añadir directamente en su mesa (no en su tbody)

Pruebe lo siguiente:

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

Como se ha mencionado en los comentarios, actualmente DART: html biblioteca no soporta mesa elementos de encabezado. Como tal, se necesita hacer un poco de trabajo. Los encabezados de tabla crear se puede utilizar el siguiente:

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 sin embargo que el insertAdjacentElement no funciona para Firefox (ya que decidieron no aplicar ese método JavaScript). Y la alternativa es utilizar:

headerRow.nodes.add(cell); 

Tenga en cuenta que este es un trabajo alrededor y no permite la indexación de la misma manera como insertCell e implica mucho más trabajo para crear las células de forma individual. Esto proporciona un trabajo en torno a la utilización de los dos errores enumerados en los comentarios que se resuelven.

Answer 2

El código siguiente trabajó bien para mí:

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