Question

我创建了一个产品销售表单。管理员可以使用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();
    });
});

Answer 1

如果你想在div之后附加数据，那么使用这段代码

$(document).ready(function(){
        $("#addrow").click(function(){
            var content = $("#dsf").html();
            $('#addrow').append(content);
        });
    });

这是测试的演示代码

＆＃13;

    $(document).ready(function(){
        $("#addrow").click(function(){
            var content = $("#dsf").html();
            $('#addrow').append(content);
        });
    });

＆＃13;

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

＆＃13;

或者您可以在 addrow

之后追加

＆＃13;

$(document).ready(function(){
        $("#addrow").click(function(){
            var content = $("#dsf").html();
            $( content ).insertBefore( "#addrow" );
        });
    });

＆＃13;

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

＆＃13;

如何使用jquery追加和删除div下的所有元素

1 个答案: