Material Design Lite表 - 添加行动态分隔格式 [英] Material Design Lite Table - Adding Rows Dynamically Breaks Format

问题描述

这是使用material-design-lite的复选框的标记：

 < label class =mdl-checkbox mdl-js-checkbox mdl-js-ripple-effectfor =checkbox> 
< input type =checkboxid =checkboxclass =mdl-checkbox__input/> 
< span class =mdl-checkbox__label>复选框< / span> 
< / label>问题是， 的标签已连接到输入 。   id 。
 
 
 
因此，当我动态添加一个新的复选框时，我还要添加一个id。但是如何找出要添加的ID？这不是一个问题，当我后来要将这些行添加到数据库？ 
 
 
 
以下是工作范例：
 
 
 
  http://codepen.io/anon/pen/QjNzzO  
 
 
 
 请注意您添加的新任务 
解决方案
如上所述，您需要升级元素。您可以调用 componentHandler.upgradeDom（）而不是 componentHandler.upgradeElement（）。
 
 
 
  http://codepen.io/pespantelis/pen/pjbvBL  
 
This is the markup for the checkbox using material-design-lite:
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox">
  <input type="checkbox" id="checkbox" class="mdl-checkbox__input" />
  <span class="mdl-checkbox__label">Checkbox</span>
</label>
Problem is, that the labels for is connected to the inputs id.

So when I add dynamically a new checkbox, I have to also add an id. But how do I find out which Id to add? Wouldn't it be a problem, when I am later going to add these rows into a database? 

Here is the working example:

http://codepen.io/anon/pen/QjNzzO

Notice the checkbox of the new task you add
解决方案
As mentioned, you need to upgrade the element. You could call componentHandler.upgradeDom() instead of componentHandler.upgradeElement().

http://codepen.io/pespantelis/pen/pjbvBL

                        
这篇关于Material Design Lite表 - 添加行动态分隔格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！