使用jQuery将行添加到表

Question

我有以下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>

Answer 1

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

来自MDN

类型

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

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

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

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

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

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

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

至：

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

或者，您可以在事件处理程序中添加“ e.preventDefault（）; ”。

片段：

 $("#newRowButton").click(function(e) { // // Use preventDefault if the button is a submit default // button // //e.preventDefault(); $('#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 src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <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" type="button">Add Flight</button> <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> </P> </form> 

Answer 2

首先，按钮的默认类型为submit ，因此您应将其更改为button否则它将提交您的表单，然后刷新页面：

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

另外，当您更改id属性时，还应将零替换为其他索引：

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

希望这可以帮助。