Javascript-форум - Ячейки таблицы и их значение

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Ячейки таблицы и их значение (https://javascript.ru/forum/jquery/34902-yachejjki-tablicy-i-ikh-znachenie.html)

Ячейки таблицы и их значение

День добрый. Есть таблица типа

<table id="product_table">
                    <tr>
                        <th>
                            Name
                        </th>
                        <th class="count">
                            Count
                        </th>
                        <th class='price'>
                            Price
                        </th>
                        <th>
                            Discount
                        </th>
                    </tr>
</table>

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

<tr>
                        <th>
                            Name
                        </th>
                        <th class="count">
                            Count
                        </th>
                        <th class='price'>
                            Price
                        </th>
                        <th>
                            Discount
                        </th>
</tr>

и в таблице уже не одна строка, а две. В полях с классом price будет числовое значение, мне нужно обойти все теги с классом price и просуммировать общее значение. Также эти поля можно удалять, функция реализована также на jquery. В чем проблема: посчитать общую сумму я могу, т.к. у меня есть переменная с этим значением. Но! При удалении ячейки сумма, понятное дело, не обновляется.

Т.е. как я понимаю, мне нужно при помощи цикла обойти все теги с классом price, взять из них значение, сложить и вывести. Если строка удаляется, опять же обходим все теги и суммируем значение. Получается некая функция.

Если кто знает, как вышеописанные действия реализовать на jquery или с помощью каких методов их реализовать, прошу подсказать. Спасибо.

Цитата:

Сообщение от Дзен-трансгуманист (Сообщение 229022)

function sumPrices () {
  var sum = 0;
  $('#product_table .price').each( function () {
    sum += parseInt( $(this).text(), 10 );
  });
  return sum;
}

Может быть так, хотя в джуквери я полный ноль. :)

UPD: если цены дробные и с точкой в качестве разделителя, то использовать

parseFloat( $(this).text() );

Да, работает. Благодарю :)

Возник новый вопрос. Как обойти все строки таблицы и получить их значение, которое между тегами?
Т.е. есть html-код:

table id="product_table">
                    <tr class='click'>
                        <th class='name'>
                            Name
                        </th>
                        <th class="count">
                            Count
                        </th>
                        <th class='price'>
                            Price
                        </th>
                        <th class='dis_price'>
                            Discount price
                        </th>
                        <th class='discount'>
                            Discount
                        </th>
                    </tr>
                </table>

Таких строк <tr></tr> будет n-ое количество. Как обойти все ячейки из тега <tr></tr> и получить значение, к примеру, между тегом

<th class='name'>name_of_product</th>

Результатом должна быть строка 'name_of_product'.

Я пытался сделать что то типа

$("#product_table .click th").each(function() {
        var result = document.getElementsByClassName($(this).attr('class')).val());
    });

но ничего не получается.

<script src="http://code.jquery.com/jquery-latest.js"></script>

<table id="product_table">
                    <tr class='click'>
                        <th class='name'>
                            Name
                        </th>
                        <th class="count">
                            Count
                        </th>
                        <th class='price'>
                            Price
                        </th>
                        <th class='dis_price'>
                            Discount price
                        </th>
                        <th class='discount'>
                            Discount
                        </th>
                    </tr>
                </table>

<script>
var arrTh=[]
$("#product_table .click th").each(function() {
        arrTh.push($(this).attr('class')+"="+$.trim($(this).text()));
    });
alert(arrTh.join(',\n'))
</script>

В ниже приведенной таблице у меня стоит обработчик клика правой кнопкой мышки, по которому выводится собственное попап-меню. В этом меню есть опция Edit. Она должна позволять редактировать значения в ячейках таблицы. Т.е. клик ПКМ -> опция Edit -> выводится тег <input> возле ячейки, по которой кликнули -> в инпут записывается текущее значение -> меняем значение на нужное -> жмем enter и значение обновляется в ячейке. Я понимаю, что ввод инфы нужно обрабатывать при помощи

$("#input_id").change(function() {
    // код
});

Проблема только с добавлением этого input в нужное место(либо возле указателя мышки, либо аккурат слева/справа от ячейки, в которой меняем значение). Прошу помощи, как решить эту проблему.

<table id="product_table">
                    <tr class='click'>
                        <th class='name'>
                            Name
                        </th>
                        <th class="count">
                            Count
                        </th>
                        <th class='price'>
                            Price
                        </th>
                        <th class='dis_price'>
                            Discount price
                        </th>
                        <th class='discount'>
                            Discount
                        </th>
                    </tr>
                </table>