How do you re-set index on a dynamically added row using jQuery
Question
I've searched and couldn't find what i'm looking for. I have a table where i'm dynamically adding rows based on an index. So i click on a link in row 5, i want to add a row at index 6. the problem lies in where when i add the rows, all the original indexes remain. All the code i've seen has to deal with names of a class or an attribute, but this is the index that is given by the html. How do i reset it? Here's my code:
<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> </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>
And here's the jQuery part:
$(document).on('click','.registrants',function(){
var curIndex = $(this).closest('tr').index();
$('#inventoryList tr').eq(curIndex).after('<tr><td></td></tr>');
});
1 answers
solution1
1 ACCPTED 2017-11-28 16:06:19
You could insert the new element directly after the clicked parent tr like :
$(document).on('click', '.registrants', function() {
var curIndex = $(this).closest('tr').after('<tr><td></td></tr>');
})
Snippet:
$(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> </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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to set and re-set dropify default image using jquery?
How to delete dynamically added row using jQuery?
How to re-set the width and height of the cropping box in jwindowcrop?
How to prevent browser to re-set inputs on page refresh?
How to increase index of dynamically added input onclick by using jquery
jQuery : Re-index order after removing dynamically added items
How to save the dynamically added row using jquery php?
How to set value in dynamically added rows form using jquery?
To re-set focus on Anchor Tag
jQuery DataTables: How do I add a row ID to each dynamically added row?
Related Tags