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

我想使用

选择表中的行，但它的行为似乎很奇怪

这（显然）有效：

项目0
项目1
项目2
项目3
项目4

但是，如果我想在表中有可选行，也不想在表中有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>

项目0barflan
项目1翼子板
项目2bardfladn

或没有：

<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>   

项目0
项目1
项目2
项目3

---

工作。我应该做一张有沙发的桌子吗？谢谢。

您在这里所做的是无效的HTML。不能将

铁选择器

或

div

作为

表

元素的子元素

您可以按照您所说的使用多个

div

元素制作表格，也可以创建自己的聚合物元素，扩展

tbody

，并使用与

铁选择器相同的行为。是一个扩展本机元素的教程。的文档将告诉您它实现的行为

下面是扩展
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>


：主持人{
显示：块；
}
聚合物({
是：“可选表”，
扩展：“tbody”，
行为：[
聚合物的铁选择性行为
]
});

然后，您可以通过执行以下操作来使用它：

<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>


项目1
项目2
项目3

这将为您提供以下输出（添加样式以显示所选项目）：

谢谢！在阅读了一些关于表的用途的资料后，我决定放弃表，转而使用div表，因为这是一个更好的解决方案！再次感谢！
<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>