聚合物铁选择器用于表格行

Question

我将使用<iron-selector>来选择我的表格行，但它似乎表现奇怪。

这个（显然）可行：

<iron-selector selected="0">
  <div>Item 0</div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</iron-selector>

但如果我想在表格中有可选择的行，而不使用表格中的 div 元素：

<table>          
  <tr>
    <td>Item 0</td><td>bar</td><td>flan</td>
  </tr>
  <iron-selector selected="0">
    <div>
        <tr>
        <td>item 1</td><td>bard</td><td>fladn</td>
        </tr>
    </div>
    <div>
      <tr>
        <td>item 2</td><td>bard</td><td>fladn</td>
      </tr>
    </div>
   </iron-selector>
  </table>

或者没有：

<table>      
 <iron-selector selected="0">
  <tr><td>Item 0</td></tr>
  <tr><td>Item 1</td></tr>
  <tr><td>Item 2</td></tr>
  <tr><td>Item 3</td></tr>
</iron-selector>   

这个问题涉及到如何在网页中展示内容。我可以建议您使用表格来放置

元素，以便更好地控制它们的位置和布局。

- so_confused_

Answer 1

您在此处进行的操作是无效的HTML。您不能将iron-selector或div作为table元素的子级。

您可以使用多个div元素创建表格，也可以创建自己的Polymer元素，该元素扩展了tbody并使用与iron-selector相同的行为。这里是一个扩展本机元素的教程。有关iron-selector的文档将告诉您它实现的行为。

以下是扩展tbody元素并实现与iron-selector元素相同行为的示例：

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-selector/iron-selectable.html">

<dom-module id="selectable-table">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
    <content></content>
  </template>
  <script>
    Polymer({
      is: "selectable-table",
      extends: "tbody",
      behaviors: [
        Polymer.IronSelectableBehavior
      ]
    });
  </script>
</dom-module>

接下来您可以按照以下步骤使用：

<table>
  <tbody is="selectable-table">
    <tr>
      <td>
        item 1
      </td>
    </tr>
    <tr>
      <td>
        item 2
      </td>
    </tr>
    <tr>
      <td>
        item 3
      </td>
    </tr>
  </tbody>
</table>

这将给您以下输出结果（添加样式以显示所选项）：

- Ben Thomas

---

谢谢！在阅读了一些关于表格的资料后，我决定放弃使用表格并改用div表格。 - so_confused_

我又改回使用表格了，因为这证明是更好的解决方案！再次感谢！ - so_confused_