單擊按鈕時添加多個表格行

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>