通过模板将输入标签插入td标签 [英] Insert Input Tag into td tags via templates

问题描述

我有一个表，每一行都有一个编辑按钮。如果按下该按钮，所有td标签都应该有一个包含值的文本输入标签。所以两个模板为每个td bei太多。 < tr template ...> 无法工作，因为td标签将被浏览器忽略，因为tds wont请参阅模板周围的表。

I have a table and each row does have an edit Button. If that button is pressed all the td tag should have a text input tag containing the values. So two templates for each td would bei Too much. <tr template ... > wont work since the td tags will bei ignored by the Browser, because the tds wont See the table around the template. Tried pretty much everything with template and it didnt work.

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

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

After the Button is pressed the table should look like this:

<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中的模板不是一个选项。

Since is have pretty big tables, templates in each td is not an option. I currently have a workaround at the moment where is use extended td tags with polymer.

推荐答案

您可以试试这个

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

使用包含类似此内容的备用代码

With the backing code containing something like this

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

您可以使用其他类型的支持数据结构，并且有比我创建的信息地图简单的东西，但我认为这是你之后的类型。

You can do it using other types of backing data structures, and have something simpler than the info map I created, but I think this is the type of thing you're after.

这篇关于通过模板将输入标签插入td标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！