我想將我的多個輸入限制為三個輸入。我嘗試了 if else 但我無法讀取的值也嘗試創建另一個變數。我也嘗試過長度，但不知道如何使用它。
$("#add-btn").click(function() {
i ;
$("#dynamicAddRemove").append('<tr><td><select name="moreFields[ i ][license_type]" required=""><option value="Psychometrician">Psychometrician</option><option value="Psychologist">Psychologist</option><option value="Teacher">Teacher</option><option value="Guidance Counselor">Guidance Counselor</option><option value="Medical Practioner">Medical Practioner</option><option value="Others">Others</option><option value="N/A">N/A</option></select></td> <td><input type="number" name="moreFields[ i ][license_number]" required></td><td><input type="date" name="moreFields[ i ][registration_date]" required></td><td><input type="date" name="moreFields[ i ][expiration_date]" required></td><td><button type="button" >-</button></td></tr>');
});
$(document).on('click', '.remove-tr', function() {
$(this).parents('tr').remove();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 pt-4 pb-1">
<span class="title fs-4 fw-bold">License</span>
<hr>
</div>
<table class="table" id="dynamicAddRemove">
<tr class="license">
<td>
<label>License Type </label>
<select name="moreFields[0][license_type]" class="form-control" required="">
<option value="Psychometrician">Psychometrician</option>
<option value="Psychologist">Psychologist</option>
<option value="Teacher">Teacher</option>
<option value="Guidance Counselor">Guidance Counselor</option>
<option value="Medical Practioner">Medical Practioner</option>
<option value="Others">Others</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<label>License Number</label>
<input type="number" name="moreFields[0][license_number]" class="form-control" required>
</td>
<td>
<label>Registration Date</label>
<input type="date" name="moreFields[0][registration_date]" class="form-control" required>
</td>
<td>
<label>Expiration Date</label>
<input type="date" name="moreFields[0][expiration_date]" class="form-control" required>
</td>
<td><button type="button" name="add" id="add-btn" class="mt-4 btn btn-primary rounded-pill" onclick="incrementClick()"> </button></td>
</tr>
</table>uj5u.com熱心網友回復：
如果您要遞增計數，則需要使用閉包：
let i = 0;
$("#add-btn").click(function() {
if (i >= 3) return;
i ;
//...
在函式外定義計數器并在函式內遞增計數器。添加一條if陳述句以設定限制并通過呼叫短路函式return。當一行被洗掉時，計數器也會減少：
$(document).on('click', '.remove-tr', function() {
$(this).closest('tr').remove();
i--;
});
順便說一句，行內事件處理程式是垃圾，避免使用它們，如果你使用 jQuery，你永遠不需要使用它們：
<div onclick="lame(this)">NEVER DO THIS</div>
此外：
添加了一個
<thead>把
<label>s 改成<th>s變成
<span>_<caption>將柱子包裹
<div class='col-12'>在整個<table>移除
<hr>
這不是必需的，這只是美學。
let i = 0;
$("#add-btn").click(function() {
if (i >= 3) return;
i ;
$("#dynamicAddRemove").append('<tr><td><select name="moreFields[ i ][license_type]" required=""><option value="Psychometrician">Psychometrician</option><option value="Psychologist">Psychologist</option><option value="Teacher">Teacher</option><option value="Guidance Counselor">Guidance Counselor</option><option value="Medical Practioner">Medical Practioner</option><option value="Others">Others</option><option value="N/A">N/A</option></select></td> <td><input type="number" name="moreFields[ i ][license_number]" required></td><td><input type="date" name="moreFields[ i ][registration_date]" required></td><td><input type="date" name="moreFields[ i ][expiration_date]" required></td><td><button type="button" >-</button></td></tr>');
});
$(document).on('click', '.remove-tr', function() {
$(this).closest('tr').remove();
i--;
});<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container">
<section class="row">
<div class="col-12 pt-4 pb-1">
<table class="table" id="dynamicAddRemove">
<caption class="fs-4 fw-bold caption-top">License</caption>
<thead>
<tr>
<th>License Type</th>
<th>License Number</th>
<th>Registration Date</th>
<th>Expiration Date</th>
</tr>
</thead>
<tr class="license">
<td>
<select name="moreFields[0][license_type]" class="form-control" required="">
<option value="Psychometrician">Psychometrician</option>
<option value="Psychologist">Psychologist</option>
<option value="Teacher">Teacher</option>
<option value="Guidance Counselor">Guidance Counselor</option>
<option value="Medical Practioner">Medical Practioner</option>
<option value="Others">Others</option>
<option value="N/A">N/A</option>
</select>
</td>
<td>
<input type="number" name="moreFields[0][license_number]" class="form-control" required>
</td>
<td>
<input type="date" name="moreFields[0][registration_date]" class="form-control" required>
</td>
<td>
<input type="date" name="moreFields[0][expiration_date]" class="form-control" required>
</td>
<td><button type="button" name="add" id="add-btn" class="btn btn-primary rounded-pill"> </button></td>
</tr>
</table>
</div>
</section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469079.html
標籤：javascript html