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

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

您可以使用其他类型的后备数据结构的去做，并且具有比信息地图更简单的东西后盾码我创造了，但我认为这是你所追求的东西。