HTML表单字段克隆数量限制问题排查与解决

问题原因 #

你的代码里BtnAdd函数没有对已存在的乘客行数量做校验，所以点击+按钮会无限制克隆，完全没触发数量限制逻辑。

实现步骤 #

1. 添加数量校验逻辑：在BtnAdd函数开头统计<tbody id="TBody">里的<tr>数量，当数量达到5时，停止克隆并禁用添加按钮。
2. 修复删除后的序号问题：原删除函数里序号从0开始，改成从1开始，符合正常的序号逻辑。
3. 删除无效代码：原BtnDel里的GetTotal()函数不存在，直接删掉。
4. 优化按钮状态：删除行后如果数量少于5，重新启用添加按钮，提升用户体验。

修改后的完整代码 #

<!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>
            // 定义最大允许克隆的数量
            const MAX_ROWS = 5;

            function BtnAdd()
            {
                /*Add Button*/
                const currentRowCount = $('#TBody tr').length;
                // 检查是否已达到最大数量
                if(currentRowCount >= MAX_ROWS){
                    // 禁用添加按钮
                    $('.buttonadd').prop('disabled', true);
                    return;
                }

                var v = $("#TRow").clone().appendTo("#TBody") ;
                $(v).find("input").val('');
                $(v).removeClass("d-none");
                // 更新序号，从1开始
                $(v).find("th").first().html(currentRowCount + 1);

                // 如果添加后达到最大数量，禁用按钮
                if($('#TBody tr').length === MAX_ROWS){
                    $('.buttonadd').prop('disabled', true);
                }
            }

            function BtnDel(v)
            {
                /*Delete Button*/
                $(v).parent().parent().remove(); 

                // 更新序号，从1开始
                $("#TBody").find("tr").each(
                    function(index)
                    {
                        $(this).find("th").first().html(index + 1);
                    }
                );

                // 删除后如果数量少于最大限制，重新启用添加按钮
                if($('#TBody tr').length < MAX_ROWS){
                    $('.buttonadd').prop('disabled', false);
                }
            }
        </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 </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>

                <h3>Maximum 5 passengers allowed to register as per rule</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 placeholder="Not Selected"></option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </td>

                            <td>
                                <select name="amt" required >
                                    <option placeholder="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 placeholder="Not Selected"></option>
                                    <option value="05-07-2023">05-07-2023</option>
                                </select>
                            </td>
                            <td>
                                <select name="doj2"disabled="">
                                    <option placeholder="Not Selected"></option>
                                    <option value="25-06-2023">22.06.2023</option>
                                </select>
                            </td>
                            <td>
                                <select name="doj3"disabled="" >
                                    <option placeholder="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>

关键修改点说明 #

• 新增了MAX_ROWS常量，统一设置最大允许的乘客数量（5），方便后续修改。
• 在BtnAdd函数开头增加数量校验，达到上限就终止克隆并禁用添加按钮。
• 修复了删除后的序号逻辑，从1开始计数，符合常规使用习惯。
• 删除了原代码中不存在的GetTotal()调用，避免报错。
• 在BtnDel函数中增加了按钮状态恢复逻辑，删除行后如果数量未达上限，重新启用添加按钮。

内容的提问来源于stack exchange，提问作者Safiyulla Mona