html - 如何在 Dart 中向 TableElement 添加行？

Question

我正在玩 Dart，我正在尝试创建一个新的 TableElement，它在 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";

不幸的是，这两行都在 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 相同的方式进行索引，并且涉及更多的工作来单独创建单元格。这提供了解决方法，解决了评论中列出的两个错误。