Question

在我的代码中，我使用while循环生成一个包含5行JavaScript的表。但是，我发现当我通过单击按钮＆＃34; Add＆＃34;将行添加到表中时，添加的行的id保持命名为＆＃34; contactdetail6＆＃34;。它假设是＆＃34; contactdetail6＆＃34;，＆＃34; contactdetail7＆＃34;，＆＃34; contactdetail8＆＃34;等等。

下面是截图，显示我的输入ID保持不变＆＃34; contactdetail6＆＃34;：

screenshot of input id

以下是我的代码：

＆＃13;

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('');
  });
});

＆＃13;

<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>

＆＃13;

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

在while循环中输入id

1 个答案: