javascript - 使用 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

type

The type of the button. Possible values are:

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

reset: The button resets all the controls to their initial values.

button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

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

所以，改变你的按钮:

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