Question

我使用bootstraptoggle生成html表，如下所示。

var configTableDiv = document.getElementById('exportListContent');

output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>';

configTableDiv.innerHTML = configTableDiv.innerHTML + output;

但是相关功能或设计在表td中无效。它显示正常复选框。有没有解决方案？

这是相关的html输出。

<td><input id="toggle-mode" type="checkbox" checked="" data-toggle="toggle" data-onstyle="warning" data-offstyle="info" data-on="Kite" data-off="InAppPurchase"></td>

Answer 1

您可以使用jquery。

执行此操作

var configTableDiv = document.getElementById('exportListContent');
output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>';
configTableDiv.innerHTML = configTableDiv.innerHTML + output;
$('#toggle-mode').bootstrapToggle();

var configTableDiv = document.getElementById('exportListContent');
output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>';
configTableDiv.innerHTML = configTableDiv.innerHTML + output;
$('#toggle-mode').bootstrapToggle();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<table id="exportListContent">
</table>

Answer 2

我认为它运作正常。

＆＃13;

var configTableDiv = document.getElementById('exportListContent');

output = '<tr><td><input id="toggle-mode" type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info"></td></tr>';

configTableDiv.innerHTML = configTableDiv.innerHTML + output;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

<table id="exportListContent"></table>

＆＃13;

Answer 3

您的代码工作正常，请确保包含jquery.js，bootstrap-toggle.min.js，bootstrap.min.css和bootstrap-toggle.min.css

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

<td><input id="toggle-mode" type="checkbox" checked="" data-toggle="toggle" data-onstyle="warning" data-offstyle="info" data-on="Kite" data-off="InAppPurchase"></td>

不能在表td中使用Bootstrap Toggle？

3 个答案: