如何使用jquery中的类追加和删除字段

Question

我创建了一个产品销售表单。管理员可以使用jquery添加多个产品单击添加按钮的字段，并可以通过单击删除按钮删除字段。 我正在尝试使用div id附加此内容，但这不起作用。在此图像中，标记区域将在每次单击添加新行按钮时附加。

<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 id="temp"></div>

                    </div>

这里是jquery部分。

<script type="text/javascript">
$(document).ready(function(){
    var elm=$(".dsf");
    $("#addrow").click(function(){
        $("#dsf").append();
    });
});

Answer 1

希望这会有所帮助......

＆＃13;

＆＃13;

 function addRow(tableID) {
	
	var table = document.getElementById(tableID);
	
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	
	var cell1 = row.insertCell(0);
	var element1 = document.createElement("input");
	element1.type = "checkbox";
	element1.name="chkbox[]";
	cell1.appendChild(element1);
	
	var cell2 = row.insertCell(1);
	cell2.innerHTML = rowCount + 1;
	
	var cell3 = row.insertCell(2);
	var element2 = document.createElement("input");
	element2.type = "text";
	element2.name = "txtbox[]";
	cell3.appendChild(element2);
	
	
}

function deleteRow(tableID) {
	try {
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;
		
		for(var i=0; i<rowCount; i++) {
			var row = table.rows[i];
			var chkbox = row.cells[0].childNodes[0];
			if(null != chkbox && true == chkbox.checked) {
				table.deleteRow(i);
				rowCount--;
				i--;
			}
			
			
		}
	}catch(e) {
		alert(e);
	}
}

   

＆＃13;

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

	<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

	<TABLE id="dataTable" width="350px">
		<TR>
			<TD><INPUT type="checkbox" name="chk"/></TD>
			<TD> 1 </TD>
			<TD> <INPUT type="text" /> </TD>
		</TR>
	</TABLE>

＆＃13;

＆＃13;

＆＃13;