javascript - 使用 JS 计算所有已检查行的字段总和

Question

我实际上正在做一个网站，用户注册一个事件并订购额外的事件，但我一直在计算额外的部分。我为该事件制定了固定价格，并为所有额外事件制定了表格。

我需要做的是JS上的一个函数，它计算表中检查的所有额外事件的价格。我已经使用该值在我的 POST ajax 中传递这些额外事件的 id(通过数组上的推送)，因此我正在寻找一种解决方案来获取我在时检查的所有额外事件的价格JS 函数。

我读过一些其他帖子，但找不到与我的需求真正相关的内容，所以我有点迷失在这里。

我启动了 JS 函数，但正如你所看到的，我不知道要在里面放什么。

我应该循环吗？有没有办法在不使用值的情况下做到这一点，或者我可以发送 2 个值吗？

有什么帮助吗？

表:

    <div class="shadow-sm p-2 mb-3 rounded">
        <div class="col-sm-12">
            <h5>Extra activities</h5>
        </div>
    </div>
    <div class="table-responsive">
        <table id="SubEventstables" class="table table-hover table-borderless" style="width:98%;margin-left:1%;">
            <thead class="thead" style="background-color:#5AC5F1;color:white">
                <tr>
                    <th scope="row">Name</th>
                    <th class="text-center" scope="row"><img src="/images/euro.png" height="25" width="25" title="€"></th>
                    <th class="text-center" scope="row"><img src="/images/calendar.png" height="25" width="25" title="Start date"></th>
                    <th class="text-center" scope="row"><img src="/images/clock.png" height="25" width="25" title="Start time"></th>
                    <th class="text-center" scope="row"><img src="/images/clock.png" height="25" width="25" title="End time"></th>
                    <th class="text-center" scope="row"><img src="/images/to-do.png" height="25" width="25"></th>
                </tr>
            </thead>
            <tbody>
                    <tr class="shadow rounded">
                        <td>test SEV1</td>
                        <td class="text-center" id="test1">15 €</td>
                        <td class="text-center">12-12-19</td>
                        <td class="text-center">10:00</td>
                        <td class="text-center">12:00</td>
                        <td class="text-center"><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" onchange="calcTotal()" name="CheckSub" id="3" value="3|15" /></td>
                    </tr>
                    <tr class="shadow rounded">
                        <td>test SEV2</td>
                        <td class="text-center" id="test1">20 €</td>
                        <td class="text-center">12-12-19</td>
                        <td class="text-center">14:00</td>
                        <td class="text-center">15:00</td>
                        <td class="text-center"><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" onchange="calcTotal()" name="CheckSub" id="4" value="4|20" /></td>
                    </tr>
            </tbody>
        </table>
    </div>
        <div class="col-sm-10">
            <input class="form-control" id="pricingExtra" />
        </div>

JS函数:

    function calcTotal() {
        $.each($("input[name='CheckSub']:checked"), function () {
         $('#pricingExtra') +=  $('#test1').val();

        });


    }

请问有什么帮助吗？

Answer 1

假设价格值和货币符号之间始终有空格，那么以下解决方案应该适合您。此方法使用不显眼的 javascript(从 html 中删除了 onchange)并且不依赖于使用 id ，但是，它确实假设价格位于第二个 td细胞。

我们使用closest()获取表行，然后使用 find()与 td:nth-child(2) 一起选择器获取第二个 td (保存价格)。那我们split上空格即可获取价格值，最后转换为Number .

// listen for when checkbox is checked
$("input[name='CheckSub']").on('change', function() {
    var sum = 0;
    
    // loop over each checkbox
    $.each($("input[name='CheckSub']:checked"), function () {
       // find the corresponding row for this checkbox 
       var row = $(this).closest('tr');
       // get the text for the price
       var priceText = row.find('td:nth-child(2)').text();
       // convert to number, assuming there is a space between value and currency symbol 
       var price = Number(priceText.split(' ')[0]);
       sum += price;           
    });
    
    console.log('Total: ' + sum);
    $('#pricingExtra').val(sum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr class="shadow rounded">
        <td>test SEV1</td>
        <td class="text-center" id="test1">15 €</td>
        <td class="text-center">12-12-19</td>
        <td class="text-center">10:00</td>
        <td class="text-center">12:00</td>
        <td class="text-center"><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" id="3" value="3|15" /></td>
    </tr>
    <tr class="shadow rounded">
        <td>test SEV2</td>
        <td class="text-center" id="test1">20 €</td>
        <td class="text-center">12-12-19</td>
        <td class="text-center">14:00</td>
        <td class="text-center">15:00</td>
        <td class="text-center"><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" id="4" value="4|20" /></td>
    </tr>

 </table>

 <div class="col-sm-10">
     <input class="form-control" id="pricingExtra" />
 </div>

您可以轻松修改它以使用 css 类(或 data- 属性)来定位价格(例如 <td class="text-center" class="price">15 €</td> )。