使用Javascript动态添加图标

时间:2016-12-06 12:58:05

标签: javascript jquery html css twitter-bootstrap

使用Javascript将元素添加到div标记

div_appuser=div_appuser+'<td><div class="switch switch-square" data-on-label="<i class=fa fa-check></i>" data-off-label="<i class=fa fa-times></i>"><input type="checkbox" id="user'+varresult.Id+'" data-toggle="switch" /></div></td>';

div_appuser 是可变的。

在开发者控制台中显示错误。

Uncaught SyntaxError: Unexpected string 

如何在bootstrap交换机上添加字体awesome图标作为标签上的数据? 代码:

document.getElementById('div_appuser').innerHTML='';
                            div_appuser='<table class="table table-hover table-bordered"><thead><tr><th>#</th><th>Name</th><th>Username</th><th>UserType</th><th>Email</th><th>Allow</th></tr></thead><tbody>';
                            for(var i=0;i<resultofusers.length;i++)
                            {
                                div_appuser=div_appuser+'<tr>';
                                var varresult = resultofusers[i];
                                div_appuser=div_appuser+'<td>'+(i+1)+'</td>';                                    
                                if(varresult.Name!=undefined)
                                {
                                    div_appuser=div_appuser+'<td>'+varresult.Name+'</td>';
                                }
                                if(varresult.Username!=undefined)
                                {
                                    div_appuser=div_appuser+'<td>'+varresult.Username+'</td>';
                                }
                                if(varresult.UserType!=undefined)
                                {
                                    div_appuser=div_appuser+'<td>'+varresult.UserType+'</td>';
                                }                                    
                                if(varresult.Email!=undefined)
                                {
                                    div_appuser=div_appuser+'<td>'+varresult.Email+'</td>';
                                }
                                if(i<resultofactiveusers.length)
                                {
                                     for(var k=0;k<resultofactiveusers.length;k++)
                                        {
                                            //alert(resultofactiveusers[k]);
                                            if(resultofactiveusers[k].MBT_SFFB__ApplicationUserName__c==varresult.Id)
                                            {
                                                if(resultofactiveusers[i].MBT_SFFB__Validated__c==true)
                                                {
                                                    div_appuser=div_appuser+'<td><div class="switch switch-square" data-on-label="<i class=fa fa-check></i>" data-off-label="<i class=fa fa-times></i>"><input type="checkbox" id="user'+varresult.Id+'" checked="" data-toggle="switch" /></div></td>';                                            
                                                }
                                                else
                                                {
                                                    div_appuser=div_appuser+'<td><div class="switch switch-square" data-on-label="<i class=fa fa-check></i>" data-off-label="<i class=fa fa-times></i>"><input type="checkbox" id="user'+varresult.Id+'" data-toggle="switch" /></div></td>';                                        
                                                }
                                            }

                                        }   
                                }
                                else
                                {
                                    div_appuser=div_appuser+'<td><div class="switch switch-square" data-on-label="<i class=fa fa-check></i>" data-off-label="<i class=fa fa-times></i>"><input type="checkbox" id="user'+varresult.Id+'" data-toggle="switch" /></div></td>';
                                }

                                div_appuser=div_appuser+'</tr>';
                            }
                            document.getElementById('div_appuser').innerHTML=div_appuser+'</tbody></table>';

2 个答案:

答案 0 :(得分:0)

我认为您存储在div_appuser变量中的html字符串存在问题。

在分配之前尝试将varresult.Id存储在一个变量中,并在追加时使用该变量。这将删除SyntaxError:Unexpected string。 我不知道字体真棒有什么问题,所以你需要在解决语法错误后调试它。

答案 1 :(得分:0)

您需要在动态重新启动交换机后调用bootstrapSwitch();功能,如

$('.switch').bootstrapSwitch();  

$('.switch').bootstrapSwitch('state', !data, true);