Форум

derbass · #1 (**permalink**) 07.12.2012, 13:40

Доброго времени суток! Есть вопрос, подскажите как осуществить. Итак, есть таблица, с некоторым количеством столбцов и строк. Есть столбец, в котором идет подсчет веса товара, указанного в строке. Как можно с помощью jQuery или JavaScript осуществить подсчет суммы всех значений в столбце?

ОлегА · #2 (**permalink**) 07.12.2012, 14:53

оч просто

<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>

derbass · #3 (**permalink**) 07.12.2012, 15:05

Скажите пожалуйста, если я заменю 'click' на 'change', у меня будет меняться значение при изменении веса, я прав? Интересует возможность при изменении веса в какой-либо ячейке, менять и общую сумму веса.

$('#start').live('change', function(){
var total = 0;
$('table .weight').each(function(){
total += Number($(this).text());
});
$('table .total').html( total );
});

ОлегА · #4 (**permalink**) 07.12.2012, 15:15

понимаете change - это событие, на которое сработает кнопка
у вас так работать не будет, как вы хотите сделать подсчет веса?при нажатии на кнопку или допустим как загрузилась страница?

derbass · #5 (**permalink**) 07.12.2012, 15:28

загрузилась страница, есть таблица с одной строкой, там задаются параметры разные, тип товара, и его характеристики, вес. Я могу добавлять строки, удалять их. Единственное что до сих пор не получается - это подсчет суммы. Я могу выложить код того что у меня получилось.

ОлегА · #6 (**permalink**) 07.12.2012, 15:31

давай код и я так и не понял при каком событии ты хочешь считать сумму и вес

ОлегА · #7 (**permalink**) 07.12.2012, 15:33

т.е сначала надо при загрузке подсчитать, а потом еще пересчитывать, если удалили или добавили строки, я правильно понял?

derbass · #8 (**permalink**) 07.12.2012, 15:36

Да-да, правильно. Сейчас код приложу.

$(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>');
        }
    }
}

derbass · #9 (**permalink**) 07.12.2012, 15:39

Такого типа таблица:

Тип Стандарт Диаметр Длинна Количество Вес +\-

значения подтягиваются из базы. При изменении, например, типа - меняется все остальное. При изменении Стандарта меняется диаметр Длинна и др. При изменении меняется Вес. Интересует реализация общей суммы (или количества, без разницы. Именя одно легко подтянуть и 2е)

derbass · #10 (**permalink**) 07.12.2012, 15:41

Здесь приложил сразу весь код скрипта, много мусора ненужного. Но надеюсь структура и схема понятны)

Форум

Справочник

Discord чат

Курсы javascript