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е) |
Здесь приложил сразу весь код скрипта, много мусора ненужного. Но надеюсь структура и схема понятны)
|
| Часовой пояс GMT +3, время: 09:32. |