我正在处理表格,其中使用javascript复制表格行,问题是当我单击添加更多按钮然后复制表格行但输入字段未显示,这里是我的表格代码
<table class="striped display" cellspacing="0" width="100%" id="myTable">
<tbody>
<tr>
<td class="input-field col s2">
<label>Module</label>
<select data-rel="chosen" name="moduleid[]" class="form-control">
<?php
$RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");
while($URow=mysqli_fetch_array($RowRes)){
echo "<option value=".$URow[0].">".$URow[1]."</option>";}?>
</select>
</td>
<td class="input-field col s2">
<label>Week Days</label>
<select id="week_days" data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
</select>
</td>
<td><button type="button" name="add" id="more_btn" class="btn right">Add More</button></td>
</tr>
</tbody>
这是在单击按钮时附加表格行的 JavaScript 代码
<script type="text/javascript">
$(document).ready(function() {
var i=1;
$('#more_btn').click(function() {
i++;
$('#myTable tbody').append('<tr id="row'+i+'"><td class="input-field col s2"><label>Module</label><select data-rel="chosen" name="moduleid[]" class="form-control"><?php$RowRes=mysqli_query($con,"Select id, name from tbl_module where status=1 order by id asc");while($URow=mysqli_fetch_array($RowRes)){echo "<option value=".$URow[0].">".$URow[1]."</option>";}?></select></td><td class="input-field col s2"><label>Week Days</label><select data-rel="chosen" name="week_days[]" class="form-control" multiple="multiple"><option value="1">Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option></select></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
$('.btn_remove').click(function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
});
看到表格输入字段的第一行工作正常,但单击添加更多按钮输入字段时复制的表格的第二行不起作用
最佳答案
您可以只使用 JQuery 通过克隆方法来实现您想要的并删除嵌入的 PHP 代码。
可以在这里找到一个简单的 fiddle https://jsfiddle.net/xpvt214o/809590/仅仅更新了主 <tr>
的 id本身。但代码如下所示:
$(document).ready(function() {
var i=1;
$('#more_btn').click(function() {
i++;
$clone = $('#first').clone(true);
$clone.attr('id', "row" + i);
$clone.find('.btn_remove').attr('data-remove-id', 'row'+i);
$('#myTable tbody').append($clone);
});
$('#myTable').on('click','.btn_remove',function(){
var button_id = $(this).data("remove-id");
$('#'+button_id+'').remove();
});
});
唯一id
我在这里操作的是表行本身的 id。但是使用 jQuery 选择器,您可以更改任何克隆元素的 id 等。
我确实怀疑您当前的代码无法按预期工作,因为即使在您的示例中,所有表单输入都具有相同的名称(您似乎只更新了表行的 id)。您可能希望通过附加 i
使表单名称本身更加动态。别处。但这显然是一个不同的问题。
您可能还想考虑在所有表单的底部添加一个“添加更多”按钮,而不是重复该按钮,因为它们都具有相同的 id
以及。记住点击处理程序与该元素关联,您不希望最终产生任何意外的后果。
关于javascript - 使用 JavaScript 复制表格行时,输入字段不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52379257/