jQuery - осуществление динамического подсчета
Доброго времени суток! Есть вопрос, подскажите как осуществить. Итак, есть таблица, с некоторым количеством столбцов и строк. Есть столбец, в котором идет подсчет веса товара, указанного в строке. Как можно с помощью jQuery или JavaScript осуществить подсчет суммы всех значений в столбце?
|
оч просто
<html>
<head>
$('#start').live('click', function(){
var total = 0;
$('table .weight').each(function(){
total += Number($(this).text());
});
$('table .total').html( total );
});
</script>
</head>
<body>
<table id="tovar">
<tbody>
<tr>
<td>товар1</td><td class="weight">20</td>
</tr>
<tr>
<td>товар2</td><td class="weight">40</td>
</tr>
<tr>
<td>товар3</td><td class="weight">60</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2" class="total"></th>
</tr>
</tfoot>
</table>
<input type="button" id="start" value="посчитать вес">
</body>
</html>
|
Спасибо за подсказку!!
Скажите пожалуйста, если я заменю 'click' на 'change', у меня будет меняться значение при изменении веса, я прав? Интересует возможность при изменении веса в какой-либо ячейке, менять и общую сумму веса.
$('#start').live('change', function(){ var total = 0; $('table .weight').each(function(){ total += Number($(this).text()); }); $('table .total').html( total ); }); |
понимаете change - это событие, на которое сработает кнопка
у вас так работать не будет, как вы хотите сделать подсчет веса?при нажатии на кнопку или допустим как загрузилась страница? |
загрузилась страница, есть таблица с одной строкой, там задаются параметры разные, тип товара, и его характеристики, вес. Я могу добавлять строки, удалять их. Единственное что до сих пор не получается - это подсчет суммы. Я могу выложить код того что у меня получилось.
|
давай код и я так и не понял при каком событии ты хочешь считать сумму и вес
|
т.е сначала надо при загрузке подсчитать, а потом еще пересчитывать, если удалили или добавили строки, я правильно понял?
|
Да-да, правильно. Сейчас код приложу.
$(document).ready(function() {
$("select#type").live("change", function() {
var _this = this;
chType(_this);
});
$("select#din").live("change", function() {
var _this = this;
chDin(_this);
});
$("select#diam").live("change", function() {
var _this = this;
chDiam(_this);
//chVes(_this);
});
$("select#length").live("change", function() {
var _this = this;
chLength(_this);
//chVes(_this);
});
$("input#rate").live("change", function() {
var _this = this;
chRate(_this);
});
$("input#ves").live("change", function() {
var _this = this;
chVes(_this);
});
function chType(_this) {
var num = $(_this).attr('class').slice(1);
var type = $(_this).val();
$("select#din.n"+num).load("/ves/function.inc.php", {'action':'din','type':type}, function() {
chDin($("select#din.n"+num));
});
}
function chDin(_this) {
var num = $(_this).attr('class').slice(1);
var din = $(_this).val();
$("select#diam.n"+num).load("/ves/function.inc.php", {'action':'diam','din':din}, function() {
chDiam($("select#diam.n"+num));
});
}
function chDiam(_this) {
var num = $(_this).attr('class').slice(1);
var din = $("select#din.n"+num).val();
var diam = $(_this).val();
$("select#length.n"+num).load("/ves/function.inc.php", {'action':'length','din':din,'diam':diam}, function(data) {
if (data == '0') {
$("select#length.n"+num).attr('disabled','disabled');
//$("input#rate.n"+num).focus();
$.post("/ves/function.inc.php", {'action':'wightnol','din':din,'diam':diam}, function(data) {
$("input#wight.n"+num).val(data);
});
}
else {
$("select#length.n"+num).removeAttr('disabled');
}
chLength($("select#length.n"+num));
});
}
function chLength(_this) {
var num = $(_this).attr('class').slice(1);
var din = $("select#din.n"+num).val();
var diam = $("select#diam.n"+num).val();
var length = $(_this).val();
$.post("/ves/function.inc.php", {'action':'wight','din':din,'diam':diam,'length':length}, function(data) {
$("input#wight.n"+num).val(data);
chRate(_this);
});
}
function chRate(_this) {
var num = $(_this).attr('class').slice(1);
var wight = $("input#wight.n"+num).val();
var rate = $("input#rate.n"+num).val();
var ves = (wight*rate).toFixed(5);
$("input#ves.n"+num).val(ves);
}
function chVes(_this) {
var num = $(_this).attr('class').slice(1);
var wight = $("input#wight.n"+num).val();
var ves = $("input#ves.n"+num).val();
var rate = (ves/wight).toFixed(0);
$("input#rate.n"+num).val(rate);
}
$("button#add").live("click", function() {
var num = $(this).attr('class').slice(1);
var newnum = parseInt(num)+1;
$(this).hide();
$.post("function.inc.php", {'action':'add','num':num}, function(data) {
$("table#calc tbody").append(data);
$("select#type.n"+newnum).focus();
});
if (num>1) {
$("td.n"+num).html('<a class="delrow" href="javascript:void(0)" onclick="del('+num+')"></a>');
}
});
function del(num) {
var row = $("tr.n"+num);
var rowprev = row.prev();
var rownext = row.next().attr('class');
var rowprevnum = parseInt(rowprev.attr('class').slice(1));
row.remove();
if (rowprevnum != '1') {
$('td.n'+rowprevnum).html('<button id="add" class="n'+rowprevnum+'" onclick="return false;"></button><a class="delrow delrowfloat" href="javascript:void(0)" onclick="del('+rowprevnum+')"></a>');
}
else {
if (!rownext) {
$('td.n'+rowprevnum).html('<button id="add" class="n'+rowprevnum+'" onclick="return false;"></button>');
}
}
}
|
Такого типа таблица:
Тип Стандарт Диаметр Длинна Количество Вес +\- значения подтягиваются из базы. При изменении, например, типа - меняется все остальное. При изменении Стандарта меняется диаметр Длинна и др. При изменении меняется Вес. Интересует реализация общей суммы (или количества, без разницы. Именя одно легко подтянуть и 2е) |
Здесь приложил сразу весь код скрипта, много мусора ненужного. Но надеюсь структура и схема понятны)
|
ох многовато приложил, ща я тебе алгоритм накину
<html>
<head>
<script>
$(function(){
function counter(class_name){
var total = 0;
$('#tovar .'+class_name).each(function(){
total += Number($(this).text());
});
$('#tovar .'+ class_name +'_total').html( total );
}
counter('weight'); counter('sum');
$('#start').live('click', function(){
counter('weight');
counter('sum');
});
$('#tovar tr').live('dblclick', function(){
$(this).remove();
counter('weight'); counter('sum');
});
});
</script>
</head>
<body>
<table id="tovar">
<tbody>
<tr>
<td>товар1</td><td class="weight">20</td><td class="sum">200</td>
</tr>
<tr>
<td>товар2</td><td class="weight">40</td><td class="sum">2050</td>
</tr>
<tr>
<td>товар3</td><td class="weight">60</td><td class="sum">2065</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Общий вес</th><th colspan="2" class="weight_total"></th>
</tr>
<tr>
<th>Общая сумма</th><th colspan="2" class="sum_total"></th>
</tr>
</tfoot>
</table>
<input type="button" id="start" value="посчитать вес">
</body>
</html>
принцип работы моего кода таков - при загрузке страницы, подсчитываются общий вес и сумма товаров, после загрузки если дважды кликнуть по одному товару, то он удалится и общий вес и сумма пересчитаются, так можно пересчитывать нажатием на кнопку, ну а если добавлен новый товар, тот же принцип как и с удалением, ну его думаю сам допилишь |
Да, приложил не то слово как много)) Ещё раз приношу извинения) Сейчас беру напилник и пилю) Спасибо за наводку! Есть нескромный вопрос - можно ли будет отписаться тебе на мыло, если будут вопросы?
|
вот это трудночитаемый код,
$.post("/ves/function.inc.php", {'action':action,'type':type,'din':din,'diam':diam,'length':length,'rate':rate,'ves':ves},
лучше делайте так
$.post("/ves/function.inc.php", {
'action' : action,
'type' : type,
'din' : din,
'diam' : diam,
'length' : length,
'rate' : rate,
'ves' : ves
},
это не ошибка, просто так на много наглядней)) |
пиши, не вопрос, но я редко туда захожу, лучше тут в личку пиши
|
Понял, мой косяк. Читабельность кода следует чтить:)
|
это у нас получается анонимная функция, если я правильно понимаю.
$(function(){
function counter(class_name){
var total = 0;
$('#tovar .'+class_name).each(function(){
total += Number($(this).text());
});
$('#tovar .'+ class_name +'_total').html( total );
}
counter('weight'); counter('sum');
$('#start').live('click', function(){
counter('weight');
counter('sum');
});
$('#tovar tr').live('dblclick', function(){
$(this).remove();
counter('weight'); counter('sum');
});
});
А как можно сделать ,что бы я мог считать общий вес, при изменении вес какого-нибудь товара?
$("input#weight").live("change", function() {
var _this = this;
chWeight(_this);
});
... ... ... и её обработка:
function chWeight(_this) {
var num = $(_this).attr('class').slice(1);
var weight= $("input#weight.n"+num).val();
var total = 0;
$('#tovar .'+class_name).each(function(){
total += Number($(this).text());
});
$('#tovar .weight').html( total );
}
});
|
Мне просто вот что инетересно - как правильн оразграничить, что бы они обе считали свои задачи, отдельно. Когда у меня функции не анонимные ,я могу их добавить, например, и в свой обработчик нажатия кнопки "+" при добавлении строки, и общее количество веса или цены у меня пересчитается
|
что бы change работал нужно его привязать к текстовому поле например:
<input type="text" value="20" class="input_sum">
$('.input_sum').live('change', function(){
alert($(this).val())
})
|
Пытаюсь подвязать на свою задачу, в принципе пока ясно)
|
$("input#allCount").live("change", function() {
var _this = this;
chCount(_this);
});
...
...
function chCount(_this){
var total = 0;
$('input#rate').each(function(){
total += Number($(this).text());
});
$('input#rate').html( total );
}
привязал к элементу, указал где и что считать, добавил взов функции пересчета при нажатии кнопки добавить и удалить. Ппц, все равно одна и та же беда |
так он у тебя из inputa значение и не тащит тут поэтому и не робит
и это че $('input#rate')? id не должны повторяться в структуре, всё до понедельника мну тут не будет, по больше литературы почитай всё станет понятно) |
Вот я как раз и хотел задать вопрос -почему значение из input не тянется))
|
потому что значение из input надо тянуть как $(this).val() а не $(this).text(), text надо писать только если нужное тебе значение заключено в теги, т.е например <div>значение</div> будет браться как $('div').text(), а val() это значит value у inputa
|
Разобрался, спасибо за наводку! Кстати, ID может быть и не уникальным.
Скидываю пример, может кому в будущем пригодится. Задача: Есть несколько столбцов, необходимо создать общую сумму заданных столбцов. При изменении значений в ячейках столбцов необходимо соответствующее изменение итоговой суммы. ТАк же необходимо раскидать эту функцию, по другим сункциям, для того что бы происходило изменение значений. + использовал разные способы округления и пр.
$("input#total").live("change", function() {
var _this = this;
chCol(_this);
});
function chCol(_this){
var total = 0;
$("input#ves").each(function(){
total += (parseInt(($(this).attr('value')*10000))/10000);
});
$("input#total").val(total.toFixed(4));
}
|
ID должно быть всегда уникальным, нельзя что бы оно применялось в нескольких элементах, может оно на вид и работает пока, но в будущем по любому столкнешься с проблемой
|
Пока, тьфу-тьфу, работает без проблем. Попробую переправить, код по наследству достался, придется переделывать. По-немногу материал осваиваю, нахожу косяки.
|
да там ниче сложного поменяй все id которые у тебя дублируются на класс и соответственно код под классы переделай там так еще проще просто # надо сменить .
|
| Часовой пояс GMT +3, время: 14:30. |