我创建了一个产品销售表格。管理员可以使用 jquery 为多个产品点击添加按钮添加字段,也可以通过点击删除按钮删除。我正在尝试使用 div id 附加它,但这不起作用。 这是我的 html 部分。
<div class="row" id="dsf">
<div class="col-md-2">
<select name="p_name" class="form-control" id="p_name">
<option value="">-Select Product-</option>
@foreach($products as $product)
<option value="{{$product->product_id}}">{{$product->name}}</option>
@endforeach
</select>
</div>
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
这是我的 jquery 部分。
$(document).ready(function(){
$("#addrow").click(function(){
$("#dsf").append();
});
});
最佳答案
如果你想在 div 之后追加数据,那么使用这段代码
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$('#addrow').append(content);
});
});
这是测试的演示代码
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$('#addrow').append(content);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dsf">
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
<div id="addrow">Click</div>
或者你可以在 addrow 之后追加
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$( content ).insertBefore( "#addrow" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dsf">
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
<div id="addrow">Click</div>
关于javascript - 如何使用jquery追加和删除div下的所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47280867/