polymer iron-selector for rows of table

Question

I would like to use <iron-selector> to select rows of my table, but it seems to behave strangely.

This (obviously) works:

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

But if I want to have selectable rows in a table, neither with divs in the table:

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

or without:

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

works. Should I just make a table with divs? Thanks.

Answer 1

您在这里做的是无效的HTML。您不能将iron-selector或div作为table元素的子级。

您可以使用多个div元素制作表格，也可以创建自己的Polymer元素，该元素扩展tbody并使用与iron-selector相同的行为。 Here是用于扩展本机元素的教程。 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>

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