Показать сообщение отдельно
  #16 (permalink)  
Старый 22.03.2015, 17:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ну тогда так:

<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" у формы, это для удобства проверки примера

Последний раз редактировалось laimas, 22.03.2015 в 18:13.
Ответить с цитированием