6

Dart で遊んでいて、tbody にヘッダーと 1 つの行を持つ新しい TableElement を作成しようとしています。

  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 セクションに到達します。何か案は？ダーツ SDK 9474。

4

2 に答える 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 と同じ方法でインデックスを作成することはできず、セルを個別に作成するにはさらに多くの作業が必要になることに注意してください。これにより、コメントに記載されている 2 つのバグが解決されるという回避策が提供されます。

于 2012-08-02T17:59:40.570 に答える