Javascript 需要动态添加行_Javascript_Php_Jquery_Html_Mysql

Javascript 需要动态添加行

javascript php jquery html mysql

Javascript 需要动态添加行,javascript,php,jquery,html,mysql,Javascript,Php,Jquery,Html,Mysql,我想在用户单击“添加更多”按钮后动态添加行。我使用jquery来完成这项工作，一切正常，但当我尝试加载从数据库获取的选择框的值并显示在循环内部时。当我试图通过jquery附加那个选择框时，我遇到了这个错误。在这方面我很乐意帮忙查看此代码和错误消息 <table class="table table-bordered form-horizontal"id="size_variants_table"> <thead> <tr> <th>Size<

我想在用户单击“添加更多”按钮后动态添加行。我使用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>

这可能对你有帮助

<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>

欢迎来到SO。我们不是在线调试器。请访问和发布努力。在这种情况下，查看视图源，您可能会发现PHPP生成的新行：如果您将append“…”更改为append”…“…”，在较新的浏览器中可能会更好。这与问题有什么关系？我正在创建动态行，一旦我们使用jquery单击“添加”按钮，您看到的值就是来自数据库的值并显示在下拉框内。当我尝试加载从数据库获取的选择框的值并在循环内部显示时，如何使用jquery append.missing追加该选择框。