Question

我有一张表格，显示了门票的一些信息

检查这个表格的html。 Check this 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>

Answer 1

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);

});

Answer 2

检查小提琴上的代码。使用以下代码，您可以获得每个选择框＆＃34; onchange＆＃34;或＆＃34; onclick＆＃34;事件。

jsfiddle

$(document).ready(function(){
   $('select').on('change',function(){
     alert($(this).val())
   })
})

Jquery循环通过表选择框

2 个答案: