Jquery 循环遍历表选择框
Jquery loop through table select box
>我有一个表格,显示一些工单信息
检查表的 html。检查这个jsfiddle
如何循环浏览每个选择框单击?,选择框即行会有所不同。
请给我一些提示。
谢谢。。。
<table id="tableTickets" class="table table-striped custab">
<thead>
<tr>
<th> Ticket Type </th>
<th> REMAINING </th>
<th> Price </th>
<th> Quantity </th>
</tr>
</thead>
<tbody>
<tr id="ticketRow1">
<td id="tdTicketName1">
<input type="hidden" id="ticketId" name="ticketId" value="1">
<h4 class="heading1">Name1</h4>
</td>
<td id="tdTicketQuantity1">
100 </td>
<td id="tdTicketPrice1">
<div id="divTicketPrice1">12.30</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty1" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr id="ticketRow2">
<td id="tdTicketName2">
<input type="hidden" id="ticketId" name="ticketId" value="2">
<h4 class="heading1">Name2</h4>
</td>
<td id="tdTicketQuantity2">
200 </td>
<td id="tdTicketPrice2">
<div id="divTicketPrice2">12.34</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty2" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr id="ticketRow3">
<td id="tdTicketName3">
<input type="hidden" id="ticketId" name="ticketId" value="3">
<h4 class="heading1">Name1</h4>
</td>
<td id="tdTicketQuantity3">
100 </td>
<td id="tdTicketPrice3">
<div id="divTicketPrice3">23.52</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty3" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr id="ticketRow4">
<td id="tdTicketName4">
<input type="hidden" id="ticketId" name="ticketId" value="4">
<h4 class="heading1">Name2</h4>
</td>
<td id="tdTicketQuantity4">
200 </td>
<td id="tdTicketPrice4">
<div id="divTicketPrice4">15.41</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty4" style="height:30px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:right;">
<h4 class="heading1">Total <div id="ticketPriceTotal" class="col-sm-12">000</div></h4>
</td>
</tr>
</tbody>
</table>
first give class to to price <div class="price"></div> and then write code given bellow,
$(document).on("change",".form-control",function(){
var total=0;
$("tbody tr").each(function(){
var price=$(this).find(".price").text();
var tickets=$(this).find(".form-control").val();
total=parseFloat(total)+(parseFloat(price)*parseFloat(tickets));
})
alert(total);
});
检查小提琴上的代码。 使用以下代码,您可以获得每个选择框"onchange"或"onclick"事件。
斯菲德尔
$(document).ready(function(){
$('select').on('change',function(){
alert($(this).val())
})
})
相关文章:
- 遍历类元素数组,并在jquery中选择同级元素
- 循环遍历元素jquery选择器
- 使用 jquery .find() 遍历按类和存储属性选择元素
- Jquery - 如果条件为真,则遍历选择器并执行某些操作
- DOJO选择遍历项
- 遍历以选择Menu并获取id(JavascriptJQuery)
- 循环遍历类名索引不起作用..选择
- 如何遍历 jQuery 选择器的结果
- 循环遍历多个选择 ajax 数据
- 使用闭包遍历带有变量的 jQuery 选择器
- Jquery 循环遍历表选择框
- 遍历选择器,按单击元素的索引号
- JQuery next直到表遍历选择
- Jquery遍历和使用选择器
- 如何遍历dom树的jquery选择更改事件
- 如何在html列表中通过按下按钮来选择和遍历项目
- Javascript -循环遍历选择选项,单击每个选项
- 如何遍历多个选择的多个选项
- 将选择的值保存在数组中并遍历它
- 遍历右侧jquery选择器的dom元素