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

只需将此更改应用于您的托管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);

Answer 2

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 3

我得到了我想要的结果：

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

在HTML中向表中添加新行

3 个答案: