whileループの入力ID

Question

私のコードでは、JavaScriptで5行のテーブルを生成するwhileループを使用します。しかし、私は、 "追加"ボタンをクリックしてテーブルに行を追加すると、追加された行のIDは "contactdetail6"という名前を保持することがわかりました。それは "contactdetail6"、 "contactdetail7"、 "contactdetail8"などとします。以下は

私の入力されたIDを表示スクリーンショットである "contactdetail6" のまま維持：

var contactIndex = 1; 
 
\t \t 
 
\t \t $('#contactcontent').append('<table>'); 
 
\t \t 
 
while (contactIndex <= 5) { 
 
    $('#contactcontent').append(
 
    '<tr>' + '<td>' + contactIndex + '</td>' + '<td>Email</td>' + '<td>' + '<input id="contactdetail' + contactIndex + '" name="contactdetailinfo" type="text" readonly>' + '</td>' + '</tr>'); 
 

 
    $('#contactcontent').data('index', contactIndex); 
 
    contactIndex++; 
 
}; 
 

 
$('#contactcontent').append('</table>'); 
 

 
$('input[id^=contactdetail]').off('click').click(function() { 
 
    contactRowClickAction(this); 
 
}); 
 

 
var contactRowCount = 1; 
 
$('input[id^=contactdetail]').each(function() { 
 
    localStorage.setItem(this.id, this.value); 
 
    contactRowCount++; 
 
}); 
 
localStorage.setItem('contactRowCount', contactRowCount); 
 

 
function contactRowClickAction(input) { 
 
    var inputId = $(input).attr('id'); 
 

 
    if (typeof(inputId) !== 'undefined') { 
 
    $("#storeType").val(inputId); 
 
    } 
 

 
    $('#contactInfoModel').openModal(); 
 
}; 
 

 
$(function() { 
 
    $('#btnNextContactInfoModel').off('click').click(function() { 
 
    $("#contactInfoModel").closeModal(); 
 

 
    var storeType = $("#storeType").val(); 
 

 
    if (typeof(storeType) !== 'undefined' && storeType.length > 0) { 
 
     $('#' + storeType).val("Contact Type= " + $("#contacttype").val() + " ; " + "Contact Info= " + $("#contact").val()); 
 
    } else { 
 
     // update index 
 

 
     var rowIndex = $('#contactcontent').data('index'); 
 

 
     var table = document.getElementById('contactcontent'); 
 
     rowIndex++; 
 
     var rowCount = table.rows.length; 
 
     var row = table.insertRow(rowCount); 
 

 
     var cell1 = row.insertCell(0); 
 
     cell1.innerHTML = rowCount + 0; 
 

 
     var cell2 = row.insertCell(1); 
 
     cell2.innerHTML = "Email"; 
 

 
     var cell3 = row.insertCell(2); 
 
     cell3.innerHTML = '<div class="input-field col s12 m20 l20 contactSelectDiv">' + '<div class="input-wrapper"></div>' + '<input id="contactdetail' + rowIndex + '" name="contactdetailinfo" type="text" readonly value="' + 'Contact Type= ' + $('#contacttype').val() + ' ; ' + 'Contact Info= ' + $('#contact').val() + '">'; + '</div>'; 
 

 

 
     // bind action 
 
     $('input[id^=contactdetail]').off('click').click(function() { 
 
     contactRowClickAction(this); 
 
     }); 
 
    } 
 
    // clear 
 
    $("#storeType").val(''); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row" id="contact"> 
 
    <div class="row"></div> 
 
    <table id="contactcontent" class="striped"> 
 
    <button id="btnAdd" class="btn-large btn-form-2 btn-floating waves-effect waves-light teal darken-2 right" type="button" name="action" onclick="contactRowClickAction()"> 
 
     <span>Add</span> 
 
     <i class="mdi-content-add"></i> 
 
    </button> 
 
    <h5>Contact</h5> 
 
    <thead> 
 
     <tr> 
 
     <th></th> 
 
     <th>Type</th> 
 
     <th>Contact Info</th> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
</div> 
 
<!-- contactModel--> 
 

 
<div id="contactInfoModel" class="modal modal-fixed-footer" style="max-height:100%;height:80%;width:60%;margin-left:20%;"> 
 
    <div class="modal-content"> 
 
    <div class="bread-crumbs-header"> 
 
     <div class="bread-crumbs-section"> 
 
     <!--<i class="header-icon small mdi-image-hdr-weak"></i>--> 
 
     <div class="header truncate modal-header"> 
 
      <span data-i18n="personal-particular-update.msg_lookup_contact_info"></span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div id="selectcontacttype" class="input-field col s12 m3 l3"> 
 
     <select id="contacttype"> 
 
      <option value="Please select">Please select</option> 
 
      <option value="1">Type 1</option> 
 
      <option value="2">Type 2</option> 
 
      <option value="3">Type 3</option> 
 
      <option value="4">Type 4</option> 
 
      <option value="5">Type 5</option> 
 
     </select> 
 
     <label data-i18n="personal-particular-update.msg_type"></label> 
 
     </div> 
 
     <div class="col s12 m3 l3"> 
 
     <td>Contact Info</td> 
 
     <div id="Contact Info"> 
 
      <input id="contact" name="contact" type="text"> 
 
     </div> 
 
     </div> 
 
     <input type="hidden" id="storeType" /> 
 
    </div> 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button"> 
 
     <i class="mdi-navigation-check"></i> 
 
     <span data-i18n="common.msg_next">next</span> 
 
    </button> 
 
    <button id="btndeleteContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light teal darken-2 right" type="button"> 
 
     <i class="mdi-action-delete"></i> 
 
     <span data-i18n="common.msg_delete"></span> 
 
    </button> 
 
    <button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button"> 
 
     <i class="mdi-navigation-close"></i> 
 
     <span data-i18n="common.msg_cancel"></span> 
 
    </button> 
 
    </div> 
 
</div>

Answer 1

あなたの最初のしばらく：

screenshot of input id

以下は私のコードです5行を追加するループはインデックスをインクリメントしていますが、ログはありません。

var rowIndex = $('#contactcontent').data('index'); 
// add new row 

// increment and store the index for the next add 
$("#contactcontent").data('index', rowIndex + 1);