Входные данные в форме суммы Jquery в нескольких таблицах

#php #jquery #mysql

Вопрос:

У меня есть страница PHP, которая заполняет HTML-таблицы из MySQL. Он выводит две отдельные таблицы с идентификаторами ‘headTable’ и ‘visits’. Я пытаюсь суммировать значения из таблицы ‘visit’ и вывести сумму в соответствующую ‘headTable’. Также есть флажок, который заполняет поле ввода, и у меня также возникают проблемы с получением правильной суммы при установке всех флажков. Сумма верна, если я вручную ввожу значения. Заранее спасибо. Вот пример на Fiddle

 <table id="headTable">
    <tr>
        <th>First Table</th>
        <th><span id="appliedTotal"></span></th>
    </tr>
</table>

<table id="visits">
    <tr>
        <td>Jane</td>
        <td>18.45</td>
        <td><input type="checkbox"></td>
        <td><input class="amount" type="text" size="20" value=""></td>
    </tr>
    <tr>
        <td>Peter</td>
        <td>100</td>
        <td><input type="checkbox"></td>
        <td><input class="amount" type="text" size="20" value=""></td>
    </tr>
</table>

<table id="headTable">
    <tr>
        <th>Second Table</th>
        <th><span id="appliedTotal"></span></th>
    </tr>
</table>

<table id="visits">
    <tr>
        <td>Ronald</td>
        <td>100</td>
        <td><input type="checkbox"></td>
        <td><input class="amount" type="text" size="20" value=""></td>
    </tr>
    <tr>
        <td>John</td>
        <td>100</td>
        <td><input type="checkbox"></td>
        <td><input class="amount" type="text" size="20" value=""></td>
    </tr>
</table>

и для моего Jquery

 <script>

$(document).ready(function(){
    $(function() {

        $('table input[type="checkbox"]').change(function() {
            var input = $(this).closest('td').next('td').find('input');

            if ($(this).is(':checked')) {
                var amount = $(this).closest('td').prev('td').text();
                var sum = 0;

                $.each($('table#visits'), function() {
                    $('.amount').each(function() {
                        sum  = Number($(this).val());
                        $('#appliedTotal').html('$' sum.toFixed(2));
                    });
                });

                input.val(amount);

            } else {
                input.val('0.00');
                var sum = 0;

                $('.amount').each(function() {
                    sum  = Number($(this).val());
                    $('#appliedTotal').html('$' sum.toFixed(2));
                });

            }
        });
    });

    $.each($('table#visits'), function() {
        $(".amount").keyup(function() {
            var sum = 0;

            $('.amount').each(function() {
                sum  = Number($(this).val());
                $('#appliedTotal').html(sum);
            });
        });
    });

});
</script>

Это то, что я хотел сделать.

Пример JSFiddle

1. Вы не задали конкретный вопрос. Но если вам нужно суммировать некоторые входные данные в jquery, то что мешает вам присвоить всем входным данным, о которых идет речь, общий класс и распределить их по классам?

2. Мой вопрос в том, что я хочу суммировать значения по таблице и вывести сумму в соответствующую ‘headTable’. Этот код суммирует все значения из обеих таблиц, и это даже не правильная сумма. Здесь я рисую пробел…

Ответ №1:

это о том, как создавать числа из долларов? Я предпочитаю обратное, но для вашего случая добавьте подстроку (1) в .val() перед передачей ее в Number ()

и, конечно, sum = ‘$’ sum перед присвоением appliedTotal

Ответ №2:

у вас не может быть двух таблиц или любых других тегов с одинаковым «id» на одной странице.