Question

我有一张桌子，每行都有一个编辑按钮。如果按下该按钮，则所有td标记都应具有包含值的文本输入标记。因此每个td的两个模板太多了。 <tr template ... >不会工作，因为浏览器会忽略td标记，因为tds不会看到模板周围的表格。几乎用模板尝试了一切，它没有用。

<table>
   <tr>
      <td> td11 </td>
      <td> td12 </td>
      <td> <button on-click="{{someFunc}}"/> </td>
   </tr>
   <tr>
      <td> td21 </td>
      <td> td22 </td>
      <td> <button on-click="{{someFunc}}"/> </td>  <!-- this Button will be pressed -->
   </tr>
</table>

按下按钮后，表格应如下所示：

<table>
   <tr>
      <td> td11 </td>
      <td> td12 </td>
      <td> <button on-click="{{someFunc}}"/> </td>
   </tr>
   <tr>
      <td> <input type="text" value="td21" /> </td>
      <td> <input type="text" value="td22" /> </td>
      <td> <button on-click="{{someFunc}}"/> </td>  <!-- this Button will be pressed -->
   </tr>
</table>

由于有很大的表，每个td中的模板都不是一个选项。我目前有一个解决方法，目前使用带有聚合物的扩展td标签。

Answer 1

你可以试试这个

<table>
   <tr>
      <td>
        <template if="{{info['row1']['active'] == false}}">td11</template>
        <template if="{{info['row1']['active'] == true}}"><input type="text" value="td11"></template>
      </td>
      <td>
        <template if="{{info['row1']['active'] == false}}">td12</template>
        <template if="{{info['row1']['active'] == true}}"><input type="text" value="td12"></template>
      </td>
      <td>
        <button id="row1" on-click="{{someFunc}}">Click Me</button>
      </td>
   </tr>
</table>

支持代码包含类似

的内容

Map info = toObservable({'row1': {'active': false}});

someFunc(Event e) {
    if(info[e.target.id]['active'] == false) {
      info[e.target.id]['active'] = true;
    } else {
      info[e.target.id]['active'] = false;
    }
}

您可以使用其他类型的支持数据结构来实现，并且比我创建的信息地图更简单，但我认为这是您追求的类型。

通过模板将输入标签插入到td标签中

1 个答案: