Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 20.03.2015, 07:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

И в каждой таблице свои поля ввода? Если да, то что тогда считать - общую сумму полей всех таблиц или у каждой таблицы сумму ее полей?
Ответить с цитированием
  #12 (permalink)  
Старый 20.03.2015, 17:03
Новичок на форуме
Отправить личное сообщение для ReeQx Посмотреть профиль Найти все сообщения от ReeQx
 
Регистрация: 19.03.2015
Сообщений: 8

всех полей, да
Ответить с цитированием
  #13 (permalink)  
Старый 21.03.2015, 00:03
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Тогда нужно обращаться к таблицам по имени класса - заменить в примере 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});
});

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

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

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

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

3) всегда ли при наборе цен вместо одной цены расчет производить по большей цене из набора?
Ответить с цитированием
  #15 (permalink)  
Старый 22.03.2015, 16:51
Новичок на форуме
Отправить личное сообщение для ReeQx Посмотреть профиль Найти все сообщения от ReeQx
 
Регистрация: 19.03.2015
Сообщений: 8

1) да, верно
2) да, дефис тоже будет встречаться
3) да, всегда
Ответить с цитированием
  #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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение содержимого элемента каждой строки в представлении после render hummingbird Backbone.js 1 22.03.2014 17:22
Считать строки в таблице игнорируя вложенные Гробовщик jQuery 7 17.12.2013 09:49
Добавить/удалить строки в таблице zerojava Элементы интерфейса 4 31.12.2012 16:43
Выделение строки в таблице posta ExtJS 5 23.06.2011 12:31
Отфильтровать строки в таблице по заданным критериям Hag1989 Общие вопросы Javascript 0 03.12.2009 02:06