Показать сообщение отдельно
  #9 (permalink)  
Старый 31.03.2013, 07:27
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<table border="1">
    <tr>
        <td>
            <select name="product[]">
                <option value="1" data-price="100">Продукт 1</option>
                <option value="2" data-price="500">Продукт 1</option>
            </select>
        </td>
        <td>
            <input name="quantity[]" />
        </td>
        <td>
            <input name="total[]" readonly="" />
        </td>
    </tr>
    <tr>
        <td>
            <select name="product[]">
                <option value="1" data-price="100">Продукт 1</option>
                <option value="2" data-price="500">Продукт 1</option>
            </select>
        </td>
        <td>
            <input name="quantity[]" />
        </td>
        <td>
            <input name="total[]" readonly="" />
        </td>
    </tr>
    <tfoot>
        <tr>
            <td>Итого:</td>
            <td><input name="total" readonly="" /></td>
        </tr>
    </tfoot>
</table>
<script>
(function(){
    var selects = document.getElementsByName('product[]'),
        inputs  = document.getElementsByName('quantity[]'),
        outputs = document.getElementsByName('total[]'),
        output  = document.getElementsByName('total')[0];

    for (var i = 0; i < selects.length; i++) {
        selects[i].onchange = inputs[i].oninput = handleChange.bind(i);
    }

    function handleChange() {
        var price = selects[this].selectedOptions[0].dataset.price;
        var count = +inputs[this].value || 0;
        outputs[this].value = price * count;

        var total = 0;
        for (var i = 0; i < outputs.length; i++) {
            total += +outputs[i].value;
        }
        output.value = total;
    }
})();
</script>


Не будет работать в старых браузерах. Но это можно поправить в принципе.
Ответить с цитированием