我试图在表格行上的动态ID上添加click事件。我已将行ID设置为表的每一行。现在我想添加click事件以在切换中显示一行（class =“hidden”）。实际上，表行将使用经典的asp代码打印循环。
<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>
这是我设置行ID的jquery代码：
$(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(){
});
});
我假装添加点击事件按钮以显示隐藏 请帮我。
答案 0 :(得分：0)
你真的不需要这一切，你可以切换点击按钮的下一个兄弟
$('.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>