亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 remove 方法上動態重新調整字段序列

在 remove 方法上動態重新調整字段序列

飲歌長嘯 2023-05-11 16:19:18
我在表單中添加了兩個字段;使用 JavaScript 的“事件數據”和“事件詳細信息”。它方便用戶添加任意數量的事件。除了以下兩個問題外,一切都運行良好。如果我添加讓我們說 5 個事件并刪除編號。2 事件。我的其余事件的順序是這樣的,1,3,4,5但它們應該看起來像1,2,3,4另外,刪除編號后。2 事件,如果我添加新事件,它會在編號 5 處創建;所以我的事件順序看起來像這樣1,3,4,5,5..如何修改我的腳本以使我的事件自動重新排列?var tableCount = 1;var index = 1;$(document).on('click', 'button.add_time', function(e) {  e.preventDefault();  tableCount++;  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');  $('#timeTable' + tableCount).find("input").val("");  index++;  $('#timeTable' + tableCount + ' .aa').html(tableCount);});$(document).on('click', 'button.removeTime', function() {  var closestTable = $(this).closest('table');  if (closestTable.attr('id') != "timeTable") {    closestTable.remove();  }  tableCount--;  if (tableCount < 1) {    tableCount = 1;  }  return false;}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="table" class="form-group">  <table id="timeTable" class="tg">    <tr class="form-group">      <td class="aa">1</td>      <td class="tg-yw4">        <button class="btn form-control btn-danger removeTime">Remove Events</button>      </td>      <td class="col-sm-4">        <input placeholder="Event Date" name="events[]" class="input-lg" type="text" onfocus="(this.type='date')">      </td>    </tr>    <tr>      <td class="aa">1</td>      <td class="tg-yw4">Event Description:</td>      <td>        <input name="event_descriptions[]" type="text" placeholder="Event description:" />      </td>    </tr>  </table></div><div class="my-5">  <button class="add_time btn btn-info">Add More Events</button></div>
查看完整描述

1 回答

?
蕭十郎

TA貢獻1815條經驗 獲得超13個贊

您可以創建一些函數,每次單擊刪除按鈕時都會調用該函數。在此函數中,您需要遍歷所有表,留下第一個表,然后用于添加.find()新值,即:count到顯示的那個 td 1,2..etc。此外,您需要使用更改表的 ID$(this).attr("id", "timeTable" + newvalue);


演示代碼:


var tableCount = 1;

var index = 1;


$(document).on('click', 'button.add_time', function(e) {

  e.preventDefault();

  tableCount++;


  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');


  $('#timeTable' + tableCount).find("input").val("");


  index++;

  $('#timeTable' + tableCount + ' .aa').html(tableCount);

});


$(document).on('click', 'button.removeTime', function() {

  var closestTable = $(this).closest('table');

  if (closestTable.attr('id') != "timeTable") {

    closestTable.remove();

  }

  tableCount--;

  resetValues(); //call to reset values

  if (tableCount < 1) {

    tableCount = 1;

  }

  return false;

});



function resetValues() {

  counter = 2; //initialze to 2 because 1 is fixed

  //looping through table not first one

  $(".tg:not(:first)").each(function() {

    //find .aa class replace its counter

    $(this).find('.aa').text(counter);

    $(this).attr('id', "timeTable" + counter);

    counter++;

  })

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="table" class="form-group">

  <table id="timeTable" class="tg">

    <tr class="form-group">

      <td class="aa">1</td>

      <td class="tg-yw4">

        <button class="btn form-control btn-danger removeTime">Remove Events</button>

      </td>


      <td class="col-sm-4">

        <input placeholder="Event Date" name="events[]" class="input-lg" type="text" onfocus="(this.type='date')">

      </td>

    </tr>


    <tr>

      <td class="aa">1</td>

      <td class="tg-yw4">Event Description:</td>

      <td>

        <input name="event_descriptions[]" type="text" placeholder="Event description:" />

      </td>

    </tr>

  </table>

</div>

<div class="my-5">

  <button class="add_time btn btn-info">Add More Events</button>

</div>


查看完整回答
反對 回復 2023-05-11
  • 1 回答
  • 0 關注
  • 127 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號