Question

我正在做一个简单的数据迭代来创建我添加到TableElement的TableRowElements：

TableRowElement table_header = new TableRowElement();
transactions_table.append(table_header);
...

var incomes = new Set();

...
if(amount > 0 && !incomes.contains(data_item))
{
    TableRowElement item_row = new TableRowElement();
    item_row.addCell().text = item_name;
    incomes.add(item_row);
}
...

incomes.forEach((row)
{
  transactions_table.append(row);
});

transactions_table.appendHtml("<tr><td colspan=${col_count+1}>--</td></tr>  ");

expenses.forEach((row)
{
  transactions_table.append(row);
});

这会产生以下结果：

                 Jun         Jul        Aug         Sep     Oct
--
rent             1,350.00   1,350.00                830.00  1,350.00
carpet cleaning                         -125.00

在forEach次迭代后附加间隔行将其放在表格底部。

为什么会这样？

Answer 1

尝试将正在运行的代码简化为一些硬编码值，以了解正在发生的事情。我相信你所尝试的应该工作得很好;我刚刚在Try Dart中执行了以下操作，它按预期工作：

import 'dart:html';

main() {
var transactions_table = new TableElement();

var incomes = new Set();
var expenses = new Set();

var item_row = new TableRowElement();
item_row.addCell().text = "Danny";
incomes.add(item_row);

var item_row2 = new TableRowElement();
item_row2.addCell().text = "Danny2";
expenses.add(item_row2);

incomes.forEach(transactions_table.append);
transactions_table.appendHtml("<tr><td colspan=2>--</td></tr>  ");
expenses.forEach(transactions_table.append);

document.body.append(transactions_table);
}

值得检查输出的HTML;因为如果标记不正确，浏览器通常会将表内容呈现在错误的位置。

TableElement.append（Element）按顺序添加行

1 个答案: