在while循环中输入ID

Question

In my code, I use while loop to generate a table with 5 rows in JavaScript. However, I found that when I add row into the table by clicking button "Add", the id of the added row keep named "contactdetail6". It suppose to be "contactdetail6", "contactdetail7", "contactdetail8" and so on.

Below is the screenshot which show my input id keep remain "contactdetail6":

screenshot of input id

and below is my code:

 var contactIndex = 1; $('#contactcontent').append('<table>'); 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

Your initial while loop that adds 5 rows is incrementing the index, but the add row from the modal dialog is not;

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

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