问题
I was try to add click event on dynamical ID's on a table row. I have set row ID to each row of a table. Now I want to add click event to show a row (class="hidden")slidedown in toggle. Actually the table row will print through a loop using classic asp code.
<table id="bus-list" class="table table-bordered table-result">
<thead style="background-color: #FCA04E">
<tr>
<th>Bus Operator</th>
<th>Bus Type</th>
<th>Depart</th>
<th>Arrive</th>
<th>Duration</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-condensed table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td><button type="button" name="book" class="btn btn-block btn-danger">Book Now</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Here is my jquery code to set row id:
$(document).ready(function(e) {
var counter = 0;
$("#bus-list tbody tr.hidden").each(function(){
counter++;
var newdivid = 'bus-more-div-' + counter;
$(this).attr('id',newdivid);
});
var bCount = 0;
$("#bus-list tbody tr.display td button[name='selectBus']").each(function(){
bCount++;
var newid = 'btn-viewMore-' + bCount;
$(this).attr('id',newid);
var dd = $(this).attr('id');
$('#btn-viewMore-' + bCount).on('click',function(){
});
});
I faild to add click event button to show hide the Please help me.
回答1:
You really don't need all that, you can just toggle the next tr sibling of the clicked button
$('.btn-select').click(function() {
$(this).closest('tr').next('tr').toggleClass('display hidden')
}).hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="bus-list" class="table table-bordered table-result">
<thead style="background-color: #FCA04E">
<tr>
<th>Bus Operator</th>
<th>Bus Type</th>
<th>Depart</th>
<th>Arrive</th>
<th>Duration</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-condensed table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td>
<button type="button" name="book" class="btn btn-block btn-danger">Book Now</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td>
<button type="button" name="book" class="btn btn-block btn-danger">Book Now</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td>
<button type="button" name="book" class="btn btn-block btn-danger">Book Now</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="" class="display">
<td>
<span class="operator">Greenline</span>
<span class="bus-type">Volvo A/C Seater (2+2)</span>
</td>
<td>Volvo Sleeper</td>
<td>
<span class="time">16:10</span>
<span class="station">Esplanade</span>
</td>
<td>
<span class="time">19:10</span>
<span class="station">City Center</span>
</td>
<td>3Hours</td>
<td>
<button type="button" id="" name="selectBus" class="btn btn-block btn-success btn-select">Select</button>
</td>
</tr>
<tr id="" class="hidden">
<td colspan="6">
<div class="buss-info">
<table class="table table-bordered table-condensed table-bordered table-bus">
<thead>
<tr>
<th>Seat Type</th>
<th>Seats</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lower Deck</td>
<td>31</td>
<td>650.00</td>
<td>
<button type="button" name="book" class="btn btn-block btn-danger">Book Now</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>来源：https://stackoverflow.com/questions/32068190/how-to-add-click-event-on-dynamically-generate-element-jquery