1

Здравствуте. Вопрос такой. Я делаю добавление новых строк в таблицу на форме по кнопке "Добавить". в таблице инпуты цена и количство. мне надо вычислить сумму. Для первой строки таблицы сумма вычисляется, но для строчек, которые появились по кнопке добавить, скрипт вычисления суммы уже не срабатывает. понимаю, что ошибка кроется где-то в name новых строк, но не разберусь без помощи профессионалов
HTML

<form  action="index.php" method="post">
   <table id="table1" class="table">
            <thead>
                <tr>
                <th >№ п/п</th>
                <th >Номенклатура</th>
                <th >Количество</th>
                <th >Цена</th>
                <th >Сумма</th>
                <th ></th>
                </tr>
            </thead>
                <tbody>
                    <tr >
                        <td></td>
                        <td>
                            <select data-placeholder="Номенклатура" class="form-control chosen-select" tabindex="2">
                                <option value=""></option>
                                <option value="Номенклатура 1">Номенклатура 1</option>
                                <option value="Кофе">Кофе</option>
                                <option value="Кола">Кола</option>
                                </select>
                            </td>                   
                        <td><input name="quantity" type="text" class="form-control"></td>
                        <td><input name="price" type="text" class="form-control"></td>
                        <td><input name="total" type="text" class="form-control" readonly></td>

                        <td><button type="button" id="DelRow" class="btn btn-danger btn-sm">-</button></td> 

                    </tr>
                </tbody>
        </div>          
    </table>

        <input class="form-control" type="text" placeholder="Комментарий">
        <button type="button" id="AddRow" class="btn btn-primary " style="margin: 1%">Добавить</button>
        <button class="btn btn-primary" type="submit" style="margin: 1%">OK</button>
    </div>
</form>
</div>

JS:

<script type="text/javascript">
    $(document).ready(function(){
        var row = '<tr><td></td><td><select data-placeholder="Номенклатура" class="form-control chosen-select" tabindex="2"><option value=""></option><option value="Номенклатура 1">Номенклатура 1</option><option value="Кофе">Кофе</option><option value="Кола">Кола</option></select></td><td><input name="quantity" type="text" class="form-control"></td><td><input name="price" type="text" class="form-control"></td><td><input name="total" type="text" class="form-control" readonly></td><td><button type="button" id="DelRow" class="btn btn-danger btn-sm">-</button></div></td></tr>' 
//тут создаю переменную строки с такими же атрибутами и стилями

        $('#AddRow').click(function(){
            $('tbody').append(row);    //Добавление строки

            $('table td:first-child').each(function (i) {
                $(this).html(i+1);    //Порядковый номер строки
        });
        });

        $('#table1').on('click','#DelRow',function(){
            $(this).parent().parent().remove(); //Удаление строки
            });

        $('input[name="price"], input[name="quantity"]').keyup(function(){
            $('input[name="total"]').val(parseInt($('input[name="price"]').val())*parseInt($('input[name="quantity"]').val()));
        }); // вычисление значения поля "Сумма"
});

</script>

http://jsfiddle.net/kley/fphfkgn5/1/

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 14 сен 2015 в 12:57

2 ответа 2

2

Сделайте так: http://jsfiddle.net/11111000000/jym2e8mg/1/

   $('#table1').on('keyup','input[name="price"],input[name="quantity"]', function(){ 

и далее:

http://jsfiddle.net/11111000000/jym2e8mg/2/

function(ev){ 
   var tr = $(this).parents('tr');
    tr.find('input[name="total"]').val(parseInt(tr.find('input[name="price"]').val())*parseInt(tr.find('input[name="quantity"]').val()));
}
12
  • Работает неправильно.
    – Visman
    11 сен 2015 в 16:22
  • что конкретно неправильно? 11 сен 2015 в 16:24
  • во всех новых строках сумма из первой строки
    – Kley
    11 сен 2015 в 16:24
  • @Kley, это ваш кривой код :P
    – Visman
    11 сен 2015 в 16:25
  • @Visman, почему кривой? подправьте
    – Kley
    11 сен 2015 в 16:33
1

Строки нет в DOM - keyup на нее не повесится. Надо использовать delegate:

.delegate( selector, eventType, handler )

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

Должно быть что-то вроде

> $( "#table1" ).delegate( "input[name='price']", "keyup",function(){
>        var el = $(this).closest('tr');        el.find('input[name="total"]').val(parseInt(el.find('input[name="price"]').val())*parseInt(el.find('input[name="quantity"]').val()));   });

https://jsfiddle.net/awzster/fphfkgn5/4/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.