6

我正在玩 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";

不幸的是，这两行最终都在标题部分。最重要的是，如果我离开

  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 部分。有任何想法吗？飞镖 SDK 9474。

4

2 回答 2

2

在您的示例中，您将第一行直接添加到您创建的表头中。但是第二行，您试图直接添加到您的表中（而不是添加到您的 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 相同的方式进行索引，并且涉及更多工作来单独创建单元格。这提供了一种解决方法，解决了注释中列出的两个错误。

于 2012-08-02T17:59:40.570 回答
1

下面的代码对我来说很好用：

 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";
于 2014-10-23T22:22:15.240 回答