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

Posted 2023-02-22

【中文标题】如何在jquery中使用类追加和删除字段

【英文标题】：how to append and remove field using class in jquery

【发布时间】：2018-04-27 00:32:54

【问题描述】：

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

【问题讨论】：

你能给我们代码吗

你应该显示 html :))

给出了代码部分。现在。

【参考方案1】：

希望这会有所帮助...

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


   

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

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

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