Question

我有以下HTML和Javascript代码。我试图克隆表中的行并重命名每个输入元素的ID。当我调试脚本时，我可以看到正在克隆的行并将其添加到表中，但在脚本的末尾它会从HTML标记中消失。我正在使用x <- c("Fiscal year end: September 30; reporting period for blablablabla", "Fiscal year end: March 31; reporting period for blablablabla")。请有人告诉我我做错了什么？

jquery-3.1.1.min.js

Answer 1

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

来自MDN

型

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

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

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

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

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

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

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

为：

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

或者您可以在yor事件处理程序中添加“ 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);
....

希望这有帮助。

使用jquery向表添加行

2 个答案: