[英]Dynamically adding a row in the table onblur the last row in the table using javascript
[英]Dynamically adding table row beside the first table row instead after the first table row using javascript
我不知道为什么要在表格上添加表格行,它只会添加到第一行旁边而不是第一行之后。
<div class="panel-body">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th width="10%">Quantity</th>
<th width="10%">Unit</th>
<th width="30%">Item Description</th>
<th width="10%">Stock No.</th>
<th width="10%">Estimated Unit Cost</th>
<th width="10%">Estimated Cost</th>
</tr>
</thead>
<tr class="wrap_inputs">
<td><input type="numer" name="quantity[]" class="form-control"></td>
<td><input type="numer" name="unit[]" class="form-control"></td>
<td><input type="text" name="item_description[]" class="form-control"></td>
<td><input type="numer" name="stock_no[]" class="form-control"></td>
<td><input type="numer" name="eunitcost[]" class="form-control"></td>
<td><input type="numer" name="ecost[]" class="form-control"></td>
</tr>
</table>
</div>
和我的JavaScript添加表行是
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".wrap_inputs");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<tr>');
$(wrapper).append('<td><input type="numer" name="quantity[]" class="form-control"></td>');
$(wrapper).append('<td><input type="numer" name="unit[]" class="form-control"></td>');
$(wrapper).append('<td><input type="text" name="item_description[]" class="form-control"></td>');
$(wrapper).append('<td><input type="numer" name="stock_no[]" class="form-control"></td>');
$(wrapper).append('<td><input type="numer" name="eunitcost[]" class="form-control"></td>');
$(wrapper).append('<td><input type="numer" name="ecost[]" class="form-control"></td>');
$(wrapper).append('</tr>');
}
else
{
alert('You Reached the limits')
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
我单击按钮添加表格时发生的情况的屏幕截图
我可能会出什么毛病? 在放置wrap_input
类还是我的JavaScript代码上?
您将新元素添加到原始表行中,方法是将它们附加到“ wrap_inputs”(实际上是第一行),因此您将嵌套的行嵌套在硬编码的行中
尝试用包装所有行
<tbody id="wrap_inputs">
... your TR ...
</body>
这样,在将childs附加到wrap_inputs时,您会将它们添加到表主体而不是第一行
因为这行$(wrapper).append('<tr>')...;
这里$(".wrap_inputs");
是一个tr
,此代码段$(wrapper).append('<tr>')
将在其中创建另一个tr
。
另外注意wrapper
是一个查询对象,您可以避免将$
放在其前面,也可以避免多次追加。 您可以执行.append("<tr><td>...</td></tr>)
或使用使用反引号创建字符串文字
$(document).ready(function() { var max_fields = 10; var wrapper = $("#dataTables-example tbody"); var add_button = $(".add_form_field"); var x = 1; add_button.click(function(e) { e.preventDefault(); if (x < max_fields) { x++; wrapper.append(`<tr> <td><input type="numer" name="quantity[]" class="form- control"></td> <td><input type="numer" name="unit[]" class="form-control"></td> <td><input type="text" name="item_description[]" class="form-control"</td> <td><input type="numer" name="stock_no[]" class="form-control"></td> <td><input type="numer" name="eunitcost[]" class="form-control"></td> <td><input type="numer" name="ecost[]" class="form-control"></td> </tr>`); } else { alert('You Reached the limits') } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-body"> <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example"> <thead> <tr> <th width="10%">Quantity</th> <th width="10%">Unit</th> <th width="30%">Item Description</th> <th width="10%">Stock No.</th> <th width="10%">Estimated Unit Cost</th> <th width="10%">Estimated Cost</th> </tr> </thead> <tbody> <tr class="wrap_inputs"> <td><input type="numer" name="quantity[]" class="form-control"></td> <td><input type="numer" name="unit[]" class="form-control"></td> <td><input type="text" name="item_description[]" class="form-control"></td> <td><input type="numer" name="stock_no[]" class="form-control"></td> <td><input type="numer" name="eunitcost[]" class="form-control"></td> <td><input type="numer" name="ecost[]" class="form-control"></td> </tr> </tbody> </table> </div> <button type="button" class="add_form_field">Add</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.