java - 如何使用 thead 和 tbody 创建 FlexTable

Question

如何在 GWT FlexTable 中创建这个最简单的表？

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

FlexTable 的文档并不清楚如何使用 thead 和 tbody 创建表格。有人可以帮忙吗？提前致谢。

Answer 1

如果你想保持FlexTable的灵 active 并且需要添加thead元素，你可以通过操作来实现表元素。这是相当低级的，但 id 可以满足您的需要。

以下是如何获取示例中给出的 DOM 结构:

FlexTable table = new FlexTable();

table.setText(0, 0, "January");
table.setText(0, 1, "$100");
table.setText(1, 0, "February");
table.setText(1, 1, "$80");

com.google.gwt.user.client.Element oldElement = table.getElement();
com.google.gwt.dom.client.Element element = (com.google.gwt.dom.client.Element) oldElement;
TableElement tableElement = (TableElement) element;
TableSectionElement tHead = tableElement.createTHead();

TableRowElement row = tHead.insertRow(0);
row.insertCell(0).setInnerText("Month");
row.insertCell(1).setInnerText("Savings");

RootPanel.get().add(table);

请注意，table.getElement(); 返回已弃用的 com.google.gwt.user.client.Element。它扩展了 com.google.gwt.dom.client.Element，TableElement 也是如此。完成所有转换后，您可以将行和单元格添加到thead。

以下是结果(在 Chrome 上使用 GWT 2.7 进行测试):