在 Dart 中添加表格行？

Question

所以我决定从 Dart 开始，我已经想知道用数据添加新表行的最佳方法是什么。

我尝试获取 tbody 并将其 children.add() 与 HTML 一起使用，但它会遇到问题，例如如果 tbody 不存在会怎样。

Answer 1

在 JavaScript 中添加新表行时，您最终会遇到诸如如果没有 tbody 或如何确定最后一行之类的问题，但在 Dart 中我认为这更容易。

这是一个例子：

import 'dart:html';

main() {
  // Find the table.
  TableElement table = query('#foo');

  // Insert a row at index 0, and assign that row to a variable.
  TableRowElement row = table.insertRow(0);

  // Insert a cell at index 0, and assign that cell to a variable.
  TableCellElement cell = row.insertCell(0);
  cell.text = 'hey!';

  // Insert more cells with Message Cascading approach and style them.
  row.insertCell(1)
    ..text = 'foo'
    ..style.background = 'red';

  row.insertCell(2)
    ..text = 'bar'
    ..style.background = 'green';
}

如果你想在末尾插入一行，只需写：

table.insertRow(-1);

细胞也是如此。