Javascript-форум - Прайс-калькулятор каждой строки в таблице

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Прайс-калькулятор каждой строки в таблице (https://javascript.ru/forum/dom-window/54483-prajjs-kalkulyator-kazhdojj-stroki-v-tablice.html)

Прайс-калькулятор каждой строки в таблице

Есть таблица, очень большая, с прайсом услуг.

<table width="100%" border="0" cellspacing="2" cellpadding="2">
<thead>
<th>Предмет</th>
<th>В наличии</th>
<th>Цена</th>
<th>Кол-во</th>
<th>Общая цена</th>
</thead>
<tr>
<td>ручка гелевая</td>
<td>40шт</td>
<td id="cena">5</td>
<td><input id="colvo" onkeyup="summ()"></td>
<td><div id="result"></div></td>
</tr>
<tr>
<td>ручка шариковая</td>
<td>40шт</td>
<td id="cena">10</td>
<td><input id="colvo" onkeyup="summ()"></td>
<td><div id="result"></div></td>
</tr>
</table>
Как можно подсчитывать суммы отдельных строк, не объявляя при этом для каждой из них свою переменную. Еще раз повторюсь ОЧЕНЬ большая таблица

Ну вам же просчет нужно только той строки, в которой производится выбор, так ведь?

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

А что означает 40шт.? Это единица измерения цены, то есть 10 у.е. за 40 шт.?

нет, простите за лишний код, это можно не учитывать, это значение показывает сколько товара в наличии

вот для наглядного примера http://learn.javascript.ru/play/O2Z5lb

Не могут N-элементов на странице иметь одно и тоже id. ID - это уникальный идентификатор. И в стилях надо описывать и не старье. На jQuery:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
table {
    border-collapse: separate;
    width: 100%;
    /* etc */
}

th {
    background: #eee;
    padding:  8px;
}

td {
    padding: 8px;
    border: 1px solid #eee;
}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    $('#as_name').on('keyup', 'input', function() {
        var p = $(this.parentNode);
        p.next().text(this.value.replace(/\D/, '')*1 * p.prev().text().replace(/\D/, '')*1)
    })
});
</script>     
</head> 

<body>
<table id="as_name">
    <thead>
        <th>Предмет</th>
        <th>В наличии</th>
        <th>Цена</th>
        <th>Кол-во</th>
        <th>Общая цена</th>
    </thead>
    <tr>
        <td>ручка гелевая</td>
        <td>40шт</td>
        <td>5</td>
        <td><input /></td>
        <td></td>
    </tr>
    <tr>
        <td>ручка шариковая</td>
        <td>40шт</td>
        <td>10</td>
        <td><input /></td>
        <td></td>
    </tr>
</table>
</body> 
</html>

Или не используется он, судя по примеру?

Спасибо большое! Еще вопрос, как потом общую сумму вывести?

Можно вывести и общую сумму, но ОЧЕНЬ большая это ОЧЕНЬ сколько? Очень большую не представляю на странице, кто же такую выдержит, но кто его знает, а вдруг, и придется CUDA подключать )

там строк 400 примерно в сумме, на странице несколько таблиц

И в каждой таблице свои поля ввода? Если да, то что тогда считать - общую сумму полей всех таблиц или у каждой таблицы сумму ее полей?

всех полей, да

Тогда нужно обращаться к таблицам по имени класса - заменить в примере id="as_name" на class="as_name", указав его всем таблицам. Чтобы не нагружать сценарий поиском элементов, расчет общей суммы производить также только во время изменений в поле ввода, последовательно добавляя/удаляя его значение у ранее определенной переменной хранящей сумму. При нажатии клавиши текущее значение поля вычитать из суммы, а при отпускании добавлять. Получится нечто такое:

$(function() {
    $('table.as_name').on('keydown keyup', 'input', function(e) {
        var p = $(this.parentNode),
            t = p.closest('table'),
            d = t.data('t'), 
            v = this.value.replace(/\D/g, '') * 1, 
            m = p.prev().text().replace(/\D/g, '') * v;
        
        if(e.type=='keydown') t.data({t: d -= d ? m : 0});    
        else{    
            t.data({t: d += m});
            this.value = v ? v : '';
            p.next().text(m ?  m : '');
            t.find('tr:last td.tot').text(d ? d : '') //ячейка таблицы хранящая сумму, также должна иметь не id="tot", а class="tot"
        }
    }).data({t: 0});
});

В свете последних заданных вопросов в личку и после просмотра сайта, вопросы:

1) общая сумма, это сумма не выбранного для каждой таблицы прайсов (как в примере выше), а общая сумма выбранного во всех таблицах которую нужно поместить в ячейку таблицы <td class="tot"></td>? То есть для каждого из прайсов рассчитывать сумму не надо?

2) набор цен как 100/150/200 гарантированно прописывается через слеш или же могут быть и иные вариации, например 100-150?

3) всегда ли при наборе цен вместо одной цены расчет производить по большей цене из набора?

1) да, верно
2) да, дефис тоже будет встречаться
3) да, всегда

Ну тогда так:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
table {
    border-collapse: separate;
    width: 100%;
    /* etc */
}

th {
    background: #eee;
    padding:  8px;
}

td {
    padding: 8px;
    border: 1px solid #eee;
    empty-cells: show;
}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    var tot = 0;
    $('form').find('table.as_name').on('keydown keyup', 'input', function(e) {
        var p = $(this.parentNode),
            v = this.value.replace(/\D/, '') * 1, 
            m = p.prev().text().split(/\D/).pop() * v;
        
        if(e.type=='keydown') tot -= tot ? m : 0;    
        else{    
            tot += m;
            this.value = v || '';
            p.next().text(m || '');
            $('#tot').text(tot || '')
        }
    });
});
</script>     
</head> 

<body>
<form id="collapse-text-dynamic-form-number-1" accept-charset="UTF-8" method="post" action="/node/22?render=overlay" autocomplete="off">
<table class="as_name">
    <thead>
        <th>Предмет</th>
        <th>В наличии</th>
        <th>Цена</th>
        <th>Кол-во</th>
        <th>Общая цена</th>
    </thead>
    <tr>
        <td>ручка гелевая</td>
        <td>40шт</td>
        <td>5</td>
        <td><input /></td>
        <td></td>
    </tr>
    <tr>
        <td>ручка шариковая</td>
        <td>40шт</td>
        <td>10</td>
        <td><input /></td>
        <td></td>
    </tr>
</table>

<table class="as_name">
    <thead>
        <th>Предмет</th>
        <th>В наличии</th>
        <th>Цена</th>
        <th>Кол-во</th>
        <th>Общая цена</th>
    </thead>
    <tr>
        <td>ручка гелевая</td>
        <td>40шт</td>
        <td>5/10/15</td>
        <td><input /></td>
        <td></td>
    </tr>
    <tr>
        <td>ручка шариковая</td>
        <td>40шт</td>
        <td>10</td>
        <td><input /></td>
        <td></td>
    </tr>
</table>

<table class="as_name">
    <thead>
        <th>Предмет</th>
        <th>В наличии</th>
        <th>Цена</th>
        <th>Кол-во</th>
        <th>Общая цена</th>
    </thead>
    <tr>
        <td>ручка гелевая</td>
        <td>40шт</td>
        <td>5</td>
        <td><input /></td>
        <td></td>
    </tr>
    <tr>
        <td>ручка шариковая</td>
        <td>40шт</td>
        <td>10-20</td>
        <td><input /></td>
        <td></td>
    </tr>
</table>

<table>
    <tr>
        <td id="tot"></td>
    </tr>
</table>
</form>
</body> 
</html>

Условия:

1) судя по коду страницы на сайте, кроме формы содержащей прайсы более других форм на ней нет, поэтому используется простой селектор - искать в форме таблицы с указанным классом (нужно их добавить таблицам, в примере это as_name). Если же могут быть и другие формы, то можно использовать id формы, правда он слишком длинный, но можно использовать только его уникальную часть, например:

$('[id|=collapse]').find('table.as_name')...
//или
$('[id|=collapse-text]').find('table.as_name')...
//и т.д., то есть то, чего нет такого же в других элементах

Если убрать таблицу содержащую ячейку суммы, заменив ее другим элементом, то к таблицам прайсов можно обращаться проще (классы таблицам, для обращения по их именам, не обязательны):

$('form').find('table')...

2) строка набора цен может иметь не цифровые символы как разделители, но не должна иметь пробелов до и после строки, и между разделителями. Если это затруднительно выполнить при выводе страницы, то нужно определить весь возможный набор символов служащий ими и изменить выражение по которому происходит разбор. Но пробел в качестве такого разделителя не желателен.

3) ячейке хранящей сумму присвоить id (вместо имени класса)

4) таблицы примера содержат по 5 колонок, причем ячейка цены предшествует полю ввода, а сумма набора в строке, это следующая после ввода ячейка. На сайте же есть таблицы с пустыми колонками, и если число колонок может быть различно в таблицах, и порядок ячеек "цена/поле ввода/сумма в строке" может быть произвольным, то нужно будет описать ячейки цен и сумм классами, обращаясь по их именам к ячейкам, либо колонки этих ячеек должны быть прописаны жестко в той последовательности, как описано в примере.

5) autocomplete="off" у формы, это для удобства проверки примера