单击按钮时添加多个表格行

Question

当我单击添加更多按钮时，我正在尝试加载包含与默认表相同的表元素的 html 文件。 当我单击“添加更多”按钮时，它会加载一次文件，但当我第二次单击该按钮时它不起作用。 这是我的默认页面的表格部分：

<div class="form_container">
    <form method="POST" action="actionPage.php">
        <div class="table_container">
            <table border="2">
                <tr>
                    <tr>
                        <td><label>Sr.No :</label></td>
                        <td><input type = "number" class="SrNo" name="SrNo" value="1" readonly></td>
                        <td><label>Design number :</label></td>
                        <td><input type="text" class="designNo" name="designNumber"></td>
                    </tr>
                    <tr>                
                        <td><label>Fabric quality :</label></td>
                        <td><select name="fabricSelect">
                            <option value="Fabric1" name="fabric1">Fabric1</option>
                            <option value="Fabric2" name="fabric2">Fabric2</option>
                            <option value="Fabric3" name="fabric3">Fabric3</option>
                            <option value="Fabric4" name="fabric4">Fabric4</option>
                            </select>           
                        <td><label>Color matching :</label></td>
                        <td><input type="select" class="colorMatch" name="colorMatch"></td>
                    </tr>
                    <tr>
                        <td><label>Quantity :</label></td>
                        <td><input type="number" class="quantity" name="quantity"></td>
                        <td><label>Printing type :</label></td>
                        <td><select name="printSelect">
                            <option value="Print1">Print1</option>
                            <option value="Print2">Print2</option>
                            <option value="Print3">Print3</option>
                            <option value="Print4">Print4</option>
                            </select>
                        </td>           
                    </tr>
                    <tr>
                        <td ><label>Rate :</label></td>
                        <td colspan="2"><input type="number" name="rate"></td>
                    </tr>
                    <tr class="newForm">
                    </tr>
                </tr>
            </table>
            <input type="submit" id="submit_btn" class="class_btn">
        </div>
    </form>
    <button class="addButton">Add more tab</button>
</div>

这是我的脚本：

<script>
    $(document).ready(function() {
        var flag = 0;
        $(".addButton").click(function(e) {
            if(flag != 5) {
                flag += 1;
                $(".newForm").load("addedForm.php");
            }
            else {
                e.preventDefault();
            }
        });
    })
</script>

这是我要加载的另一个文件：

<tr>
<td><label>Sr.No :</label></td>
<td><input type = "number" class="SrNo" value="" readonly></td>

<td><label>Design Number:</label></td>
<td><input type="text" class="designNo"></td>

Answer 1

是否有任何理由加载文件而不是克隆您需要的元素，特别是因为它已经出现在您的 DOM 中？在我看来，这更干净且更易于管理。

我认为下面的这段代码应该做同样的事情而不必加载另一个文件（我遇到了跨源问题）

编辑 现在克隆整个表而不是仅仅一行。请注意输入的名称，因为它们也是克隆的。

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<div class="form_container">
    <form method="POST" action="actionPage.php">
        <div class="table_container">
            <table id="clone" border="2">
                <tr>
                    <tr >
                        <td><label>Sr.No :</label></td>
                        <td><input type = "number" class="SrNo" name="SrNo" value="1" readonly></td>
                        <td><label>Design number :</label></td>
                        <td><input type="text" class="designNo" name="designNumber"></td>
                    </tr>
                    <tr>                
                        <td><label>Fabric quality :</label></td>
                        <td><select name="fabricSelect">
                            <option value="Fabric1" name="fabric1">Fabric1</option>
                            <option value="Fabric2" name="fabric2">Fabric2</option>
                            <option value="Fabric3" name="fabric3">Fabric3</option>
                            <option value="Fabric4" name="fabric4">Fabric4</option>
                            </select>           
                        <td><label>Color matching :</label></td>
                        <td><input type="select" class="colorMatch" name="colorMatch"></td>
                    </tr>
                    <tr>
                        <td><label>Quantity :</label></td>
                        <td><input type="number" class="quantity" name="quantity"></td>
                        <td><label>Printing type :</label></td>
                        <td><select name="printSelect">
                            <option value="Print1">Print1</option>
                            <option value="Print2">Print2</option>
                            <option value="Print3">Print3</option>
                            <option value="Print4">Print4</option>
                            </select>
                        </td>           
                    </tr>
                    <tr>
                        <td ><label>Rate :</label></td>
                        <td colspan="2"><input type="number" name="rate"></td>
                    </tr>
                    <tr class="newForm">
                    </tr>
                </tr>
            </table>
            
        </div>
        <input type="submit" id="submit_btn" class="class_btn">
    </form>
    <button class="addButton">Add more tab</button>
</div>

<script>
    $(document).ready(function() {
        var flag = 0;
        $(".addButton").click(function(e) {
            if(flag != 5) {
                flag += 1;
                var clone = $("#clone").clone();
                clone.find("input[name=SrNo]").val(flag+1);
                clone.appendTo($(".table_container"));
            }
            else {
                e.preventDefault();
            }
        });
    })
</script>