jQueryを使用して動的に追加された行にインデックスを再設定する方法

Question

検索したものが見つかりませんでした。私は動的にインデックスに基づいて行を追加しているテーブルがあります。だから私は行5のリンクをクリックして、私はインデックス6に行を追加したい。問題は、私が行を追加すると、すべての元のインデックスが残っています。私が見たすべてのコードは、クラスまたは属性の名前を扱わなければなりませんが、これはhtmlによって与えられるインデックスです。どうすればリセットできますか？ここに私のコードは次のとおりです。

<table class="table" id="inventoryList"> 
<thead> 
    <tr> 
    <th class="text-center">#</th> 
    <th>Class Date</th> 
    <th class="text-center">Time</th> 
    <th>Instruction</th> 
    <th class="text-center">Registrants</th> 
    <th class="text-center">Status</th> 
    <th>&nbsp;</th> 
    </tr> 
</thead> 
<tbody> 

    <tr> 
    <td class="text-center">1</td> 
    <td class="">Friday, December 15, 2017</td> 
    <td class="text-center"> 
     <select id="course-time" name="course-time" data-id="34" class="form-control"> 
     <option value="0">...</option> 

      <option value="1">1 AM</option> 

      <option value="2">2 AM</option> 

      <option value="3">3 AM</option> 

      <option value="4">4 AM</option> 

      <option value="5">5 AM</option> 

      <option value="6">6 AM</option> 

      <option value="7">7 AM</option> 

      <option value="8" selected="">8 AM</option> 

      <option value="9">9 AM</option> 

      <option value="10">10 AM</option> 

      <option value="11">11 AM</option> 

      <option value="12">12 AM</option> 

      <option value="13">1 PM</option> 

      <option value="14">2 PM</option> 

      <option value="15">3 PM</option> 

      <option value="16">4 PM</option> 

      <option value="17">5 PM</option> 

      <option value="18">6 PM</option> 

      <option value="19">7 PM</option> 

      <option value="20">8 PM</option> 

      <option value="21">9 PM</option> 

      <option value="22">10 PM</option> 

      <option value="23">11 PM</option> 

      <option value="24">12 PM</option> 

     </select> 
    </td> 
    <td class=""> 
     <select id="course-instructor" name="course-instructor" data-id="34" class="form-control"> 
     <option value="0">Choose Instructor</option> 

      <option value="1">Raymond Bieselin</option> 

      <option value="2">Joseph Saglimbene</option> 

      <option value="3">Raymond Scotto</option> 

      <option value="4">James Lawrence</option> 

      <option value="5">Richard Allen</option> 

      <option value="6">Tom Flynn</option> 

      <option value="7">Bob Loveridge</option> 

      <option value="8">Damien Avilies</option> 

      <option value="9">Paul Walsh</option> 

     </select> 
    </td> 
    <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a> 
    </td> 
    <td class="text-center"> 
     <select id="course-status" name="course-status" data-id="34" class="form-control"> 
     <option value="open" selected="">Open</option> 
     <option value="closed">Closed</option> 
     <option value="cancel">Cancel</option> 
     </select> 
    </td> 
    <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="34"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td> 
    </tr> 

    <tr> 
    <td class="text-center">2</td> 
    <td class="">Thursday, December 14, 2017</td> 
    <td class="text-center"> 
     <select id="course-time" name="course-time" data-id="35" class="form-control"> 
     <option value="0">...</option> 

      <option value="1">1 AM</option> 

      <option value="2">2 AM</option> 

      <option value="3">3 AM</option> 

      <option value="4">4 AM</option> 

      <option value="5">5 AM</option> 

      <option value="6">6 AM</option> 

      <option value="7">7 AM</option> 

      <option value="8" selected="">8 AM</option> 

      <option value="9">9 AM</option> 

      <option value="10">10 AM</option> 

      <option value="11">11 AM</option> 

      <option value="12">12 AM</option> 

      <option value="13">1 PM</option> 

      <option value="14">2 PM</option> 

      <option value="15">3 PM</option> 

      <option value="16">4 PM</option> 

      <option value="17">5 PM</option> 

      <option value="18">6 PM</option> 

      <option value="19">7 PM</option> 

      <option value="20">8 PM</option> 

      <option value="21">9 PM</option> 

      <option value="22">10 PM</option> 

      <option value="23">11 PM</option> 

      <option value="24">12 PM</option> 

     </select> 
    </td> 
    <td class=""> 
     <select id="course-instructor" name="course-instructor" data-id="35" class="form-control"> 
     <option value="0">Choose Instructor</option> 

      <option value="1">Raymond Bieselin</option> 

      <option value="2">Joseph Saglimbene</option> 

      <option value="3">Raymond Scotto</option> 

      <option value="4">James Lawrence</option> 

      <option value="5">Richard Allen</option> 

      <option value="6">Tom Flynn</option> 

      <option value="7">Bob Loveridge</option> 

      <option value="8">Damien Avilies</option> 

      <option value="9">Paul Walsh</option> 

     </select> 
    </td> 
    <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a> 
    </td> 
    <td class="text-center"> 
     <select id="course-status" name="course-status" data-id="35" class="form-control"> 
     <option value="open" selected="">Open</option> 
     <option value="closed">Closed</option> 
     <option value="cancel">Cancel</option> 
     </select> 
    </td> 
    <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="35"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td> 
    </tr> 

    <tr> 
    <td class="text-center">3</td> 
    <td class="">Saturday, December 9, 2017</td> 
    <td class="text-center"> 
     <select id="course-time" name="course-time" data-id="33" class="form-control"> 
     <option value="0">...</option> 

      <option value="1">1 AM</option> 

      <option value="2">2 AM</option> 

      <option value="3">3 AM</option> 

      <option value="4">4 AM</option> 

      <option value="5">5 AM</option> 

      <option value="6">6 AM</option> 

      <option value="7">7 AM</option> 

      <option value="8" selected="">8 AM</option> 

      <option value="9">9 AM</option> 

      <option value="10">10 AM</option> 

      <option value="11">11 AM</option> 

      <option value="12">12 AM</option> 

      <option value="13">1 PM</option> 

      <option value="14">2 PM</option> 

      <option value="15">3 PM</option> 

      <option value="16">4 PM</option> 

      <option value="17">5 PM</option> 

      <option value="18">6 PM</option> 

      <option value="19">7 PM</option> 

      <option value="20">8 PM</option> 

      <option value="21">9 PM</option> 

      <option value="22">10 PM</option> 

      <option value="23">11 PM</option> 

      <option value="24">12 PM</option> 

     </select> 
    </td> 
    <td class=""> 
     <select id="course-instructor" name="course-instructor" data-id="33" class="form-control"> 
     <option value="0">Choose Instructor</option> 

      <option value="1">Raymond Bieselin</option> 

      <option value="2">Joseph Saglimbene</option> 

      <option value="3">Raymond Scotto</option> 

      <option value="4">James Lawrence</option> 

      <option value="5">Richard Allen</option> 

      <option value="6">Tom Flynn</option> 

      <option value="7">Bob Loveridge</option> 

      <option value="8">Damien Avilies</option> 

      <option value="9">Paul Walsh</option> 

     </select> 
    </td> 
    <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a> 
    </td> 
    <td class="text-center"> 
     <select id="course-status" name="course-status" data-id="33" class="form-control"> 
     <option value="open" selected="">Open</option> 
     <option value="closed">Closed</option> 
     <option value="cancel">Cancel</option> 
     </select> 
    </td> 
    <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="33"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td> 
    </tr> 

    <tr> 
    <td class="text-center">4</td> 
    <td class="">Friday, December 8, 2017</td> 
    <td class="text-center"> 
     <select id="course-time" name="course-time" data-id="32" class="form-control"> 
     <option value="0">...</option> 

      <option value="1">1 AM</option> 

      <option value="2">2 AM</option> 

      <option value="3">3 AM</option> 

      <option value="4">4 AM</option> 

      <option value="5">5 AM</option> 

      <option value="6">6 AM</option> 

      <option value="7">7 AM</option> 

      <option value="8" selected="">8 AM</option> 

      <option value="9">9 AM</option> 

      <option value="10">10 AM</option> 

      <option value="11">11 AM</option> 

      <option value="12">12 AM</option> 

      <option value="13">1 PM</option> 

      <option value="14">2 PM</option> 

      <option value="15">3 PM</option> 

      <option value="16">4 PM</option> 

      <option value="17">5 PM</option> 

      <option value="18">6 PM</option> 

      <option value="19">7 PM</option> 

      <option value="20">8 PM</option> 

      <option value="21">9 PM</option> 

      <option value="22">10 PM</option> 

      <option value="23">11 PM</option> 

      <option value="24">12 PM</option> 

     </select> 
    </td> 
    <td class=""> 
     <select id="course-instructor" name="course-instructor" data-id="32" class="form-control"> 
     <option value="0">Choose Instructor</option> 

      <option value="1">Raymond Bieselin</option> 

      <option value="2">Joseph Saglimbene</option> 

      <option value="3">Raymond Scotto</option> 

      <option value="4">James Lawrence</option> 

      <option value="5">Richard Allen</option> 

      <option value="6">Tom Flynn</option> 

      <option value="7">Bob Loveridge</option> 

      <option value="8">Damien Avilies</option> 

      <option value="9">Paul Walsh</option> 

     </select> 
    </td> 
    <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a> 
    </td> 
    <td class="text-center"> 
     <select id="course-status" name="course-status" data-id="32" class="form-control"> 
     <option value="open" selected="">Open</option> 
     <option value="closed">Closed</option> 
     <option value="cancel">Cancel</option> 
     </select> 
    </td> 
    <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="32"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td> 
    </tr> 

</tbody> 
</table> 

そしてここでは、jQueryの一部です：

$(document).on('click','.registrants',function(){ 
    var curIndex = $(this).closest('tr').index(); 
    $('#inventoryList tr').eq(curIndex).after('<tr><td></td></tr>'); 
}); 

Answer 1

Working fiddle。

あなたのようなクリックされた親TRの直後に新しい要素を挿入することもできます

$(document).on('click', '.registrants', function() { 
    var curIndex = $(this).closest('tr').after('<tr><td></td></tr>'); 
}) 

・ホープ、このことができます。

$(document).on('click', '.registrants', function() { 
 
    var curIndex = $(this).closest('tr').after('<tr><td colspan="6">NEW LINE</td></tr>'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<table class="table" id="inventoryList"> 
 
    <thead> 
 
    <tr> 
 
     <th class="text-center">#</th> 
 
     <th>Class Date</th> 
 
     <th class="text-center">Time</th> 
 
     <th>Instruction</th> 
 
     <th class="text-center">Registrants</th> 
 
     <th class="text-center">Status</th> 
 
     <th>&nbsp;</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    <tr> 
 
     <td class="text-center">1</td> 
 
     <td class="">Friday, December 15, 2017</td> 
 
     <td class="text-center"> 
 
     <select id="course-time" name="course-time" data-id="34" class="form-control"> 
 
      <option value="0">...</option> 
 

 
      <option value="1">1 AM</option> 
 

 
      <option value="2">2 AM</option> 
 

 
      <option value="3">3 AM</option> 
 

 
      <option value="4">4 AM</option> 
 

 
      <option value="5">5 AM</option> 
 

 
      <option value="6">6 AM</option> 
 

 
      <option value="7">7 AM</option> 
 

 
      <option value="8" selected="">8 AM</option> 
 

 
      <option value="9">9 AM</option> 
 

 
      <option value="10">10 AM</option> 
 

 
      <option value="11">11 AM</option> 
 

 
      <option value="12">12 AM</option> 
 

 
      <option value="13">1 PM</option> 
 

 
      <option value="14">2 PM</option> 
 

 
      <option value="15">3 PM</option> 
 

 
      <option value="16">4 PM</option> 
 

 
      <option value="17">5 PM</option> 
 

 
      <option value="18">6 PM</option> 
 

 
      <option value="19">7 PM</option> 
 

 
      <option value="20">8 PM</option> 
 

 
      <option value="21">9 PM</option> 
 

 
      <option value="22">10 PM</option> 
 

 
      <option value="23">11 PM</option> 
 

 
      <option value="24">12 PM</option> 
 

 
     </select> 
 
     </td> 
 
     <td class=""> 
 
     <select id="course-instructor" name="course-instructor" data-id="34" class="form-control"> 
 
      <option value="0">Choose Instructor</option> 
 

 
      <option value="1">Raymond Bieselin</option> 
 

 
      <option value="2">Joseph Saglimbene</option> 
 

 
      <option value="3">Raymond Scotto</option> 
 

 
      <option value="4">James Lawrence</option> 
 

 
      <option value="5">Richard Allen</option> 
 

 
      <option value="6">Tom Flynn</option> 
 

 
      <option value="7">Bob Loveridge</option> 
 

 
      <option value="8">Damien Avilies</option> 
 

 
      <option value="9">Paul Walsh</option> 
 

 
     </select> 
 
     </td> 
 
     <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <select id="course-status" name="course-status" data-id="34" class="form-control"> 
 
      <option value="open" selected="">Open</option> 
 
      <option value="closed">Closed</option> 
 
      <option value="cancel">Cancel</option> 
 
     </select> 
 
     </td> 
 
     <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="34"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="text-center">2</td> 
 
     <td class="">Thursday, December 14, 2017</td> 
 
     <td class="text-center"> 
 
     <select id="course-time" name="course-time" data-id="35" class="form-control"> 
 
      <option value="0">...</option> 
 

 
      <option value="1">1 AM</option> 
 

 
      <option value="2">2 AM</option> 
 

 
      <option value="3">3 AM</option> 
 

 
      <option value="4">4 AM</option> 
 

 
      <option value="5">5 AM</option> 
 

 
      <option value="6">6 AM</option> 
 

 
      <option value="7">7 AM</option> 
 

 
      <option value="8" selected="">8 AM</option> 
 

 
      <option value="9">9 AM</option> 
 

 
      <option value="10">10 AM</option> 
 

 
      <option value="11">11 AM</option> 
 

 
      <option value="12">12 AM</option> 
 

 
      <option value="13">1 PM</option> 
 

 
      <option value="14">2 PM</option> 
 

 
      <option value="15">3 PM</option> 
 

 
      <option value="16">4 PM</option> 
 

 
      <option value="17">5 PM</option> 
 

 
      <option value="18">6 PM</option> 
 

 
      <option value="19">7 PM</option> 
 

 
      <option value="20">8 PM</option> 
 

 
      <option value="21">9 PM</option> 
 

 
      <option value="22">10 PM</option> 
 

 
      <option value="23">11 PM</option> 
 

 
      <option value="24">12 PM</option> 
 

 
     </select> 
 
     </td> 
 
     <td class=""> 
 
     <select id="course-instructor" name="course-instructor" data-id="35" class="form-control"> 
 
      <option value="0">Choose Instructor</option> 
 

 
      <option value="1">Raymond Bieselin</option> 
 

 
      <option value="2">Joseph Saglimbene</option> 
 

 
      <option value="3">Raymond Scotto</option> 
 

 
      <option value="4">James Lawrence</option> 
 

 
      <option value="5">Richard Allen</option> 
 

 
      <option value="6">Tom Flynn</option> 
 

 
      <option value="7">Bob Loveridge</option> 
 

 
      <option value="8">Damien Avilies</option> 
 

 
      <option value="9">Paul Walsh</option> 
 

 
     </select> 
 
     </td> 
 
     <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <select id="course-status" name="course-status" data-id="35" class="form-control"> 
 
      <option value="open" selected="">Open</option> 
 
      <option value="closed">Closed</option> 
 
      <option value="cancel">Cancel</option> 
 
     </select> 
 
     </td> 
 
     <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="35"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="text-center">3</td> 
 
     <td class="">Saturday, December 9, 2017</td> 
 
     <td class="text-center"> 
 
     <select id="course-time" name="course-time" data-id="33" class="form-control"> 
 
      <option value="0">...</option> 
 

 
      <option value="1">1 AM</option> 
 

 
      <option value="2">2 AM</option> 
 

 
      <option value="3">3 AM</option> 
 

 
      <option value="4">4 AM</option> 
 

 
      <option value="5">5 AM</option> 
 

 
      <option value="6">6 AM</option> 
 

 
      <option value="7">7 AM</option> 
 

 
      <option value="8" selected="">8 AM</option> 
 

 
      <option value="9">9 AM</option> 
 

 
      <option value="10">10 AM</option> 
 

 
      <option value="11">11 AM</option> 
 

 
      <option value="12">12 AM</option> 
 

 
      <option value="13">1 PM</option> 
 

 
      <option value="14">2 PM</option> 
 

 
      <option value="15">3 PM</option> 
 

 
      <option value="16">4 PM</option> 
 

 
      <option value="17">5 PM</option> 
 

 
      <option value="18">6 PM</option> 
 

 
      <option value="19">7 PM</option> 
 

 
      <option value="20">8 PM</option> 
 

 
      <option value="21">9 PM</option> 
 

 
      <option value="22">10 PM</option> 
 

 
      <option value="23">11 PM</option> 
 

 
      <option value="24">12 PM</option> 
 

 
     </select> 
 
     </td> 
 
     <td class=""> 
 
     <select id="course-instructor" name="course-instructor" data-id="33" class="form-control"> 
 
      <option value="0">Choose Instructor</option> 
 

 
      <option value="1">Raymond Bieselin</option> 
 

 
      <option value="2">Joseph Saglimbene</option> 
 

 
      <option value="3">Raymond Scotto</option> 
 

 
      <option value="4">James Lawrence</option> 
 

 
      <option value="5">Richard Allen</option> 
 

 
      <option value="6">Tom Flynn</option> 
 

 
      <option value="7">Bob Loveridge</option> 
 

 
      <option value="8">Damien Avilies</option> 
 

 
      <option value="9">Paul Walsh</option> 
 

 
     </select> 
 
     </td> 
 
     <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <select id="course-status" name="course-status" data-id="33" class="form-control"> 
 
      <option value="open" selected="">Open</option> 
 
      <option value="closed">Closed</option> 
 
      <option value="cancel">Cancel</option> 
 
     </select> 
 
     </td> 
 
     <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="33"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="text-center">4</td> 
 
     <td class="">Friday, December 8, 2017</td> 
 
     <td class="text-center"> 
 
     <select id="course-time" name="course-time" data-id="32" class="form-control"> 
 
      <option value="0">...</option> 
 

 
      <option value="1">1 AM</option> 
 

 
      <option value="2">2 AM</option> 
 

 
      <option value="3">3 AM</option> 
 

 
      <option value="4">4 AM</option> 
 

 
      <option value="5">5 AM</option> 
 

 
      <option value="6">6 AM</option> 
 

 
      <option value="7">7 AM</option> 
 

 
      <option value="8" selected="">8 AM</option> 
 

 
      <option value="9">9 AM</option> 
 

 
      <option value="10">10 AM</option> 
 

 
      <option value="11">11 AM</option> 
 

 
      <option value="12">12 AM</option> 
 

 
      <option value="13">1 PM</option> 
 

 
      <option value="14">2 PM</option> 
 

 
      <option value="15">3 PM</option> 
 

 
      <option value="16">4 PM</option> 
 

 
      <option value="17">5 PM</option> 
 

 
      <option value="18">6 PM</option> 
 

 
      <option value="19">7 PM</option> 
 

 
      <option value="20">8 PM</option> 
 

 
      <option value="21">9 PM</option> 
 

 
      <option value="22">10 PM</option> 
 

 
      <option value="23">11 PM</option> 
 

 
      <option value="24">12 PM</option> 
 

 
     </select> 
 
     </td> 
 
     <td class=""> 
 
     <select id="course-instructor" name="course-instructor" data-id="32" class="form-control"> 
 
      <option value="0">Choose Instructor</option> 
 

 
      <option value="1">Raymond Bieselin</option> 
 

 
      <option value="2">Joseph Saglimbene</option> 
 

 
      <option value="3">Raymond Scotto</option> 
 

 
      <option value="4">James Lawrence</option> 
 

 
      <option value="5">Richard Allen</option> 
 

 
      <option value="6">Tom Flynn</option> 
 

 
      <option value="7">Bob Loveridge</option> 
 

 
      <option value="8">Damien Avilies</option> 
 

 
      <option value="9">Paul Walsh</option> 
 

 
     </select> 
 
     </td> 
 
     <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a> 
 
     </td> 
 
     <td class="text-center"> 
 
     <select id="course-status" name="course-status" data-id="32" class="form-control"> 
 
      <option value="open" selected="">Open</option> 
 
      <option value="closed">Closed</option> 
 
      <option value="cancel">Cancel</option> 
 
     </select> 
 
     </td> 
 
     <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="32"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>