Question

我想在用户点击添加更多按钮后动态添加行。我使用jquery做这一切工作正常，但当我尝试加载选择框的值，从数据库和显示内部循环。虽然我试图通过jquery追加选择框我得到了这个错误。亲切的帮助。

查看此代码和错误消息

<table class="table table-bordered form-horizontal"id="size_variants_table">
<thead>
<tr>
<th>Size</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody
<tr class="control-group">
<td class="control-label">
<select class="form-control" name="product_size[]" id="mylist">
<option value="<?php echo 12;?>"><?php echo 12;?></option></select>
</td>
<td>
<input type="text" name="product_size_price[]" class="form-control"/>
</td>
<td>
<input type="text" name="product_size_qty[]" id="product_size_qty" class="form-control product_size_qty"  onchange="valuecheck();"/>
</td>

<td><span id='removeButton' /><i class="icon-trash bigger-130"></i></span></td>

</tr>
</tbody>
</table>
<input type='button' value='Add Button' id='addButton' />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>


$(document).ready(function () {

$("#addButton").click(function () {
if( ($('.form-horizontal .control-group').length+1) > 12222) {
alert("Only 2 control-group allowed");
return false;
}

var id = ($('.form-horizontal .control-group').length + 1).toString();
$('.form-horizontal').append('<tr class="control-group" id="control-group' + id + '"><td class="control-label" for="inputEmail' + id + '"><select class="form-control" name="product_size[]"> <option value="<?php echo 12;?>"><?php echo 12;?></option></select></td><td class="control-label" for="inputEmail' + id + '"><input type="text" id="inputEmail' + id + '" placeholder="Email"></td><td class="control-label" for="inputEmail' + id + '"><input type="text" id="inputEmail' + id + '" placeholder="Email"></td></tr>');
 });

 $("#removeButton").click(function () {
 if ($('.form-horizontal .control-group').length == 1) {
 alert("No more textbox to remove");
 return false; 
 }

 $(".form-horizontal .control-group:last").remove();
 });
 });

 </script>

Answer 1

这可能会对你有所帮助

<html>
<head>
<title>jQuery add / remove textbox example</title>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<style type="text/css">
    div{
        padding:8px;
    }
</style>

</head>

<body>
<script>

 var inpCount = <?php echo $yourdatabasevalue ?>;
     for(var i = 0;i<inpCount;i++){

           $('#your_div_where_you_want_to_append').append("<input type='text' name='pc"+(i+1)+"' /><br />");

       }
   </script> 
</body>
</html>

需要动态添加行

1 个答案: