2014-10-08 165 views
0

我有一張桌子,每一行都有一個編輯按鈕。如果按下該按鈕,則所有td標籤都應該有一個包含值的文本輸入標籤。所以每個td的兩個模板會太多。 <tr template ... >將無法​​正常工作,因爲td標籤將被瀏覽器忽略,因爲tds不會查看模板周圍的表格。嘗試幾乎所有與模板,它沒有工作。按下按鈕通過模板將輸入標籤插入td標籤

<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標籤。

+0

你可以讀取td的值並通過js插入一個元素(輸入)...這是一個js問題嗎? – Mika 2014-10-08 18:02:10

+0

不,它不是一個JS問題。我寫了'via templates';) – Azael 2014-10-08 18:29:07

+0

如何創建行('')是靜態HTML還是代碼生成? 我猜表格是在一個自定義Polymer元素的模板裏面? – 2014-10-08 20:02:10

回答

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

您可以使用其他類型的後備數據結構的去做,並且具有比信息地圖更簡單的東西后盾碼我創造了,但我認爲這是你所追求的東西。