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

当我点击AddMore按钮时，我试图加载包含和默认表相同的表元素的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>

高级专员：
设计编号：
面料质量：
Fabric1
Fabric2
Fabric3
Fabric4
配色：
数量：
打印类型：
打印1
打印2
打印3
打印4
费率：
添加更多选项卡

这是我的剧本：

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

$（文档）.ready（函数（）{
var标志=0；
$（“.addButton”）。单击（函数（e）{
如果（标志！=5）{
flag+=1；
$（“.newForm”）.load（“addedForm.php”）；
}
否则{
e、 预防默认值（）；
}
});
})

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

<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>

高级专员：
设计编号：

是否有任何理由加载文件而不是克隆所需的元素，特别是因为它已经出现在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>

高级专员：
设计编号：
面料质量：
Fabric1
Fabric2
Fabric3
Fabric4
配色：
数量：
打印类型：
打印1
打印2
打印3
打印4
费率：
添加更多选项卡
$（文档）.ready（函数（）{
var标志=0；
$（“.addButton”）。单击（函数（e）{
如果（标志！=5）{
flag+=1；
var clone=$（“#clone”）.clone（）；
clone.find（“输入[name=SrNo]”）.val（标志+1）；
clone.appendTo（$（“.table_container”）；
}
否则{
e、 预防默认值（）；
}
});
})

Ahh，我看到“Sr.No”值为空。我会更新我的答案。你可以增加一个值，但我真的不知道你的用例。我还意识到加载文件在这里不起作用，所以我附加了元素，因为我不知道克隆。如果我们想节省再次键入所有元素的时间，那么您的方法真的很棒。关于SrNo，我想在添加新表时自动增加它。我做到了。现在我将尝试使用you方法克隆整个表。非常感谢。我有一个问题。clone.find是什么（“input[name=SrNo]”.val（“”）；在这里执行吗？@NeerajChimwal

clone.find（“input[name=SrNo]”）。val（“”

在克隆的元素中查找SrNo输入，并将其值设置为零。我将更新我的答案，以显示克隆整个表，但基本上您所要做的就是更改id的位置，以便使用正确的元素referenced@NeerajChimwal我还更新了代码以增加SrNo字段的值。也许这会更有意义