И в каждой таблице свои поля ввода? Если да, то что тогда считать - общую сумму полей всех таблиц или у каждой таблицы сумму ее полей?
|
всех полей, да
|
Тогда нужно обращаться к таблицам по имени класса - заменить в примере 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" у формы, это для удобства проверки примера |
| Часовой пояс GMT +3, время: 05:19. |