Question

我正在玩Dart，我正在尝试创建一个带有标题和tbody中的一行的新TableElement。

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

不幸的是，这两行最终都出现在thead部分。最重要的是，如果我只离开

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

行按照预期到达tbody部分。有任何想法吗？ Dart SDK 9474。

Answer 1

在您的示例中，您将第一行直接添加到您创建的表头中。但是第二行，你试图直接添加到你的表中（而不是你的TBody）

尝试以下方法：

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

如评论中所述，目前dart：html库不支持表头元素。因此，需要完成一些工作。您可以使用以下创建表标题：

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

但请注意，insertAdjacentElement不适用于firefox（因为他们选择不实现该JavaScript方法）。另一种方法是使用：

headerRow.nodes.add(cell);

请注意，这是一种解决方法，不允许以与insertCell相同的方式进行索引，并且涉及单独创建单元格的更多工作。这提供了一个解决工具，解决了注释中列出的两个错误。

Answer 2

以下代码对我很好：

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

如何在Dart中向TableElement添加行？

2 个答案: