如何在html中克隆字段限制？我尝试使用下面的代码，我不能限制克隆其continueing我需要限制克隆到5字段.因此，所有其他功能都工作得很好，但我不能做字段克隆限制使用添加按钮。请告诉我任何人howsthese可能做？我的整个代码都贴在下面。请检查我的错误区域并澄清错误。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.2.slim.js" integrity="sha256-OflJKW8Z8amEUuCaflBZJ4GOg4+JnNh9JdVfoV+6biw=" crossorigin="anonymous"></script>
<script>
function BtnAdd()
{
/*Add Button*/
var v = $("#TRow").clone().appendTo("#TBody") ;
$(v).find("input").val('');
$(v).removeClass("d-none");
$(v).find("th").first().html($('#TBody tr').length - 0);
}
function BtnDel(v)
{
/*Delete Button*/
$(v).parent().parent().remove();
GetTotal();
$("#TBody").find("tr").each(
function(index)
{
$(this).find("th").first().html(index);
}
);
}
</script>
</head>
<body>
<div class="container">
<!-- Change action -->
<form method="POST" action="https://script...." action='server-script.cgi' onsubmit='this.submit();this.reset();return false;'>
<h4> |Registration Form for M.V Corals </left></h4>
<hr class="double">
<p>
<label for="inv_no"> Reg.No: </label>
<input type="text" name="inv_no" value="Auto" readonly="readonly"></p>
<p>
<label for="cust_nm"> Name of Register:</label>
<input type="text" name="cust_nm" placeholder="Type Your Name" required=""> </p>
<p>
<label for="addr"> Address:</label>
<input type="text" name="addr" placeholder="Type Your Address" required="" >
</p>
<p>
<label for="city"> Mob.No:</label>
<input type="text" name="city" placeholder="Type Your Mob.No." required="">
</p>
<!--Date of Journey 1: <input type="date" name="inv_dt" value="dd-mm-yy"> </br>
Date of Journey 2: <input type="date" name="inv_dt2" value="dd-mm-yy"> </br>
Date of Journey 3: <input type="date" name="inv_dt3" value="dd-mm-yy"> </br> -->
<h3>Maximum 5 passengers allowed to register as per rule</center> </h3>
<table >
<thead>
<tr>
<th >Sl.No.</th>
<th >Name of Passenger</th>
<th >Age</th>
<th >Gender</th>
<th >Class</th>
<th >DoJ 1</th>
<th >DoJ 2</th>
<th >DoJ 3</th>
<th >
<button type="button" class="buttonadd" onclick="BtnAdd()">+</button>
</th>
</tr>
</thead>
<tbody id="TBody">
<tr id="TRow" >
<th scope="row">1</th>
<td ><input type="text" size="25" name="item_nm" placeholder="Type Your Name" required></td>
<td><input type="text" size="1" name="qty" placeholder="Age" required ></td>
<td>
<select name="rate" required >
<option placebolder="Not Selected"></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
<td>
<select name="amt" required >
<option placebolder="Not Selected"></option>
<option value="TOKEN">TOKEN</option>
<option value="FIRST CLASS">FIRST CLASS</option>
<option value="SECOND CLASS">SECOND CLASS</option>
<option value="BUNK">BUNK</option>
</select>
</td>
<td>
<select name="doj1" required >
<option placebolder="Not Selected"></option>
<option value="05-07-2023">05-07-2023</option>
</select>
</td>
<td>
<select name="doj2"disabled="">
<option placebolder="Not Selected"></option>
<option value="25-06-2023">22.06.2023</option>
</select>
</td>
<td>
<select name="doj3"disabled="" >
<option placebolder="Not Selected"></option>
<option value="28-06-2023">22.06.2023</option>
</select>
</td>
<td class="NoPrint"><button type="button" class="buttondel" onclick="BtnDel(this)">X</button></td>
</tr>
</tbody>
</table>
<button type="submit" class="submit" >Submit</button>
<button type="reset" class="reset">Reset</button>
<hr class="double">
</form>
</div>
</body>
</html>字符串
1条答案
按热度按时间kuuvgm7e1#
向BtnAdd（）和BtnDel（）添加一些逻辑来计算行数并禁用/启用添加按钮：
字符串
参见Working Fiddle：https://jsfiddle.net/8nj5mk7b/3/