在while循環中輸入ID

Question

在我的代碼中，我使用while循環在JavaScript中生成具有5行的表。 但是，我發現當我通過單擊按鈕“添加”將行添加到表中時，添加的行的ID保持名為“ contactdetail6”。 假定為“ contactdetail6”，“ contactdetail7”，“ contactdetail8”等。

下面的屏幕截圖顯示了我的輸入ID保持為“ contactdetail6”：

輸入ID的屏幕截圖

下面是我的代碼：

 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

您最初的添加5行的while循環正在增加索引，但是模式對話框中的添加行卻沒有；

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

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