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

あなたのbutton要素に関連して発生している問題：

ボタンの種類

タイプ

MDNから。可能な値は次のとおりです。

submit：ボタンはフォームデータをサーバーに送信します。これは、属性が指定されていない場合、または属性が空の値または無効な値に動的に変更された場合のデフォルトです。

リセット：このボタンは、すべてのコントロールを初期値にリセットします。

ボタン：ボタンにはデフォルト動作はありません。イベントの発生時にトリガされる、要素のイベントに関連付けられたクライアント側のスクリプトを持つことができます。

デフォルト値が指定されていない場合、「送信」であるため、これが問題です。

<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

まずあなたがbuttonに変更しなければならないか、それはあなたのフォームは、ページを更新し提出しますのでボタンは、デフォルトではタイプsubmitがあります

<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); 
.... 

希望します。