Javascript 使用jquery向表中添加行

我有下面的HTML和Javascript代码。我试图克隆表中的一行并重命名每个输入元素的ID。调试脚本时，我可以看到行被克隆并添加到表中，但在脚本结束时，它从HTML标记中消失。我使用的是

jquery-3.1.1.min.js

。有人能告诉我我做错了什么吗

<form name="input" action="Request.jsp" method="get">
    <TABLE id="flightData">
        <TR>
            <TD></TD>
            <TD></TD>
        </TR>
        <TR>
            <TD>GDS</TD>
            <TD><input id="code" type="text" name="Code"
                value="<%=Code%>" /></TD>
                <TD>CountryCode</TD>
            <TD><input id="countrycode" type="text" name="CountryCode"
                value="<%=countryCode%>" /></TD>
                <TD>Carrier Code</TD>
            <TD><input id="carriercode" type="text" name="CarrierCode"
                value="<%=carrierCode%>" /></TD>
                <TD>Flight Number</TD>
            <TD><input id="flightnumber" type="text" name="FlightNumber"
                value="<%=flightNumber%>" /></TD>
                <TD>Departure Date</TD>
            <TD><input id="departuredate" type="text" name="DepartureDate"
                value="<%=departureDate%>" /></TD>
                <TD>Departure Port</TD>
            <TD><input id="departureport" type="text" name="DeparturePort"
                value="<%=departurePort%>" /></TD>
            <TD>Arrival Port</TD>
            <TD><input id="arrivalport" type="text" name="ArrivalPort"
                value="<%=arrivalPort%>" /></TD>

    </TABLE>
    <P>
       <button id="newRowButton">Add Flight</button>

       <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    </P>
   <script type="text/javascript">
   $("#newRowButton").click(function() {
        $('#flightData tbody').append($('#flightData tbody tr:last').clone());

        $('#flightData tr').each(function(i) {
            if (i === 1)
                return;

            var textinput = $(this).find('input');
            textinput.eq(0).attr('id', 'code' + i);
            textinput.eq(0).attr('id', 'countrycode' + i);
            textinput.eq(0).attr('id', 'carriercode' + i);
            textinput.eq(0).attr('id', 'flightnumber' + i);
            textinput.eq(0).attr('id', 'departuredate' + i);
            textinput.eq(0).attr('id', 'departureport' + i);
            textinput.eq(0).attr('id', 'arrivalport' + i);
        });
    });
   </script>

</form>

GDS
国家代码
载波码
航班号
离港日
出发港
到达港

添加航班

$（“#新建按钮”）。单击（函数（）{
$（'#flightData tbody'）.append（$（'#flightData tbody tr:last'）.clone（））；
$（'#flightData tr'）。每个（函数（i）{
如果（i==1）
返回；
var textinput=$（this.find（'input'）；
textinput.eq（0）.attr（'id'，'code'+i）；
textinput.eq（0）.attr（'id'，'countrycode'+i）；
textinput.eq（0）.attr（'id'，'carriercode'+i）；
textinput.eq（0）.attr（'id'，'flightnumber'+i）；
textinput.eq（0）.attr（'id'，'departuredate'+i）；
textinput.eq（0）.attr（'id'，'departureport'+i）；
textinput.eq（0）.attr（'id'，'arrivalport'+i）；
});
});

您遇到的问题与按钮元素有关：

从

类型

按钮的类型。可能的值为：

提交：按钮将表单数据提交到服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值

重置：该按钮将所有控件重置为其初始值

按钮：按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些脚本在事件发生时被触发

因为默认值（如果没有指定）是“提交”，这是您的问题

因此，从以下位置更改按钮：

<button id="newRowButton">Add Flight</button>

GDS
国家代码
载波码
航班号
离港日
出发港
到达港

添加航班

首先，默认情况下按钮的类型为

submit

，因此您应该将其更改为

按钮，否则它将提交您的表单，然后刷新页面：

<button id="newRowButton" type='button'>Add Flight</button>

希望这有帮助

<button id="newRowButton" type='button'>Add Flight</button>

textinput.eq(0).attr('id', 'code' + i);
textinput.eq(1).attr('id', 'countrycode' + i);
textinput.eq(2).attr('id', 'carriercode' + i);
....