html - 在 HTML 中向表中添加新行

Question

我一直在玩 Dart，我喜欢它，但现在我感觉有点笨。

我正在尝试将新行添加到具有以下结构的 html 页面中的表中：

<table>
   <thead>
   ...
   </thead>
   <tbody>
   ...
   </tbody>
</table>

问题是当我执行代码时，新行出现在 tbody 标记之后，然后我失去了 CSS 样式。

我正在这样做：

TableElement myTable = query('#tabTest');
TableRowElement newLine = new TableRowElement();  
newLine.insertCell(0).text = "9";
newLine.insertCell(1).text = "aaa";
newLine.insertCell(2).text = "bbb";
newLine.insertCell(3).text = "ccc";
myTable.nodes.add(newLine);

这是错的吗？我应该怎么做才能使新行进入 tbody 标签内？有人可以给我举个例子吗？

Answer 1

Dart 提供了许多构造元素的方法。你可以这样做：

void TableElement makeTable(List<String> ofStuff){
   final s = new StringBuffer();

   s.add('<table>');
   s.add('<thead></thead>');
   for(final stuff in ofStuff){
      s.add('<tr><td>${stuff}</td></tr>');
   }
   s.add('</table>');

   return new Element.html(s.toString()) as TableElement;
}

Answer 2

我通过这样做得到了我想要的结果：

TableElement myTable = query('#tabTest');
// add at the end
TableRowElement newLine = myTable.insertRow(myTable.rows.length); 
newLine.insertCell(0).text = "9";
newLine.insertCell(1).text = "aaa";
newLine.insertCell(2).text = "bbb";
newLine.insertCell(3).text = "ccc";

Answer 3

只需将此更改应用于您的托管 HTML 文件：

<table id="tabTest">
   <thead>
   </thead>
   <tbody id="tbody">
   </tbody>
</table>

以及对您的 Dart 代码的更改：

//  TableElement myTable = query('#tabTest');
  var myTable = query('#tbody');
  TableRowElement newLine = new TableRowElement();
  newLine.insertCell(0).text = "9";
  newLine.insertCell(1).text = "aaa";
  newLine.insertCell(2).text = "bbb";
  newLine.insertCell(3).text = "ccc";
  myTable.nodes.add(newLine);