javascript - 无法将动态引导选择添加到表
问题描述
我正在尝试bootstrap-select
在定义如下的表中动态添加:
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="select0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
本质上,当用户按下按钮时,我的脚本会为该表创建新行。问题是bootstrap-select
您可以在此处下载的新内容未正确添加,实际上是不可见的。不知道怎么解决,有人能帮帮我吗?
这是js代码:
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
这是一个工作小提琴。
解决方案
我不确定你的意思是$(...).selectpicker()
没有用,因为我在你的小提琴中测试过它,它工作得很好。我在这里分叉了https://jsfiddle.net/hpysz5xr/
代码包含在下面。
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
$('#select'+counter).selectpicker();
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="criteria0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2">
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
推荐阅读
- java - 如何使用 JavaFX GUI 显示数组的内容
- ios - UITabBarController 中 TabBar 和 TabBarItem 之间的区别
- kotlin - Kotlin 的 mapIndexed 是否保证保留排序
- botframework - LUIS 错误:抱歉,我的机器人代码有问题
- angular - 类型 Program[] 不可分配给 string[]
- python - 在两点之间生成非随机正态分布值
- javascript - Flappy Bird:有没有办法找到两极的产卵率?
- racket - 如何遍历球拍中的列表?如果列表中的字符是字母,我想添加到一个新字符串
- python - 我怎样才能从scrapy得到正确的回应?
- ios - Firebase 检测电子邮件验证