我有下表，当我按下第一个按钮时，我调用 jquery 来克隆第一行并添加新行。
<table id='vehReg' class='table table-striped table-bordered bootstrap-datatable' style='font-size:10px;table-layout: fixed;'>
<thead>
<tr>
<th style='width: 10%;'>No.</th>
<th style='width: 30%;'>Sel</th>
<th style='width: 20%;'>Desc.</th>
<th style='width: 18%;'><input type= 'button' value='Add Row' id='addRow()' />
<input type='hidden' value='0' id='totalRows' name='totalRows' /></th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<select class='sSelect' data-rel='chosen' style='font-size:10px;max-width:80%;'>
</select>
<br\><p style='color:#FF0000;' type='text' class='srror' ></p>
</td>
<td>
<input style='font-size:10px;max-width:80%;' class='descInput' type='text' id='desc' name='desc' ><p style='color:#FF0000;' type='text' class='descError' ></p>
</td>
<td>
</td>
</tr>
</tbody>
下面是我用于克隆的 jquery。它克隆得很好，现在的问题是，一旦克隆，我的选择就无法再工作了。我只是无法选择组合框。需要进行任何调整，我使用带有 data-rel 的引导类型组合框来提供在其中搜索的选项。
$("#addRow").click(function(){
var count = $("#vehReg tr").length;
var $clone = $("#vehReg tbody tr:first").clone();
$clone.attr({
id: "emlRow_" + count,
name: "emlRow_" + count,
style: "" // remove "display:none"
});
$clone.find("input,select").each(function(){
$(this).attr({
id: $(this).attr("id") + count,
name: $(this).attr("name") + count
});
});
$("#vehReg tbody").append($clone);
});
我在我的机器上尝试了你的代码，它运行得很好。也许您的问题在于引导组合框。因此，请尝试刷新或重置引导组合框。
我用过类似的plugin http://silviomoreto.github.io/bootstrap-select/并有类似的问题。所以我用了这个，它解决了我的问题。
$("#select").selectpicker('refresh');
我还发现您上面粘贴的代码中有一个小错误。
<input type= 'button' value='Add Row' id='addRow' />
相反，它就像
id='addRow()'
这是使用所选插件更新的代码。
<script type="text/javascript">
$(document).ready(function(){
$("#addRow").click(function(){
var row = "<tr>"+
"<td></td>"+
"<td><select class='chosen-select'> <option>1 --</option> <option>2 --</option> <option>3 --</option> <option>4 --</option> <option>5 --</option> <option>6 --</option> <option>7 --</option> <option>8 --</option> </select></td>"+
"<td><input style='font-size:10px;max-width:80%;' class='descInput' type='text' id='desc' name='desc' ></td>"+
"</tr>";
$("#vehReg tbody").append(row);
$(".chosen-select").chosen();
});
});
</script>
<body>
<table id='vehReg'>
<thead>
<tr>
<th>No.</th> <th>Sel</th> <th>Desc.</th>
<th ><input type= 'button' value='Add Row' id='addRow' />
<input type='hidden' value='0' id='totalRows' name='totalRows' /></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
希望这可以帮助。
我在 javascript 本身而不是克隆函数中添加了代码。通过这种方式，您可以更轻松地维护计数并不断向字段添加命名约定。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
