Вычислите общее количество ценностей в ячейках таблицы, используя jQuery

У меня есть стол с ценностями как показано ниже,

<table>
    <tbody>
        <tr>
            <td class='price'>5</td>
        </tr>
        <tr>
            <td class='price'>NA</td>
        </tr>
        <tr>
            <td class='price'>10</td>
        </tr>
        <tr>
            <td class='price'>NA</td>
        </tr>
        <tr>
            <td class='price'>20</td>
        </tr>
        <tr>
            <td class='total'></td>
        </tr>
    </tbody>
</table>

Моя задача состоит в том, чтобы вычислить общее количество действительных ценностей (5, 10 и 20) и показать сумму в полной клетке. Кодекс, который я попробовал,

var prices = $('.price'),
    total = 0;

$.each(prices, function(i, price) {
    if (price != 'NA') {
         total = total + price;
    }
});

$('.total').text(total);

Проблема, с которой я сталкиваюсь, я не получаю правильную продукцию. Иногда, ячейка таблицы содержит пустую стоимость вместо 'NA'. Я не уверен, что я пропускаю. Пожалуйста, предложите.

0

7 ответы

Created a fiddle for you... Fiddle

var total = 0;
$(".price").each(function (i, price) {
    var price = $(this).text();

    if (price != 'NA') {
        total = total + parseInt(price);
    }

    $('.total').text(total);

});
1
добавлено

Использовать isNaN чтобы проверить, содержит ли клетка стоимость тогда, преобразовывают его:

$.each(prices, function(i, price){
if (!isNaN($(this).text())){
     total = total + Number($(this).text());
}});

Примечание: если вы будете использовать "parseInt", то он будет всегда возвращать целое число - поэтому, если у вас будут десятичные значения в использовании стола Число (Последовательность) который попытается преобразовать все, что похоже на число...

1
добавлено

Начиная с цены использование объекта jQuery $ .fn.each (), тогда необходимо использовать $ .fn.text () получить текст.

Также используйте parseInt (), преобразовать последовательность в целое число.

Использование

var prices = $('.price');
var total = 0;
prices.each(function() {
    var price = $(this).text(); //use the method to get text of cell
    if (price != 'NA') {
        total = total + parseInt(price, 10); //use parseInt to convert to number
    }
});
$('.total').text(total);

<div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden">

$(document).ready(function() {
  var prices = $('.price');
  var total = 0;
  prices.each(function() {
    var price = $(this).text();
    if (price != 'NA') {
      total += parseInt(price, 10);
    }
  });
  $('.total').text(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td class='price'>5</td></tr>
<tr><td class='price'>NA</td></tr>
<tr><td class='price'>10</td></tr>
<tr><td class='price'>NA</td></tr>
<tr><td class='price'>20</td></tr>
<tr><td class='total'></td></tr>
</tbody>
</table>
</div> </div>
0
добавлено

Необходимо использовать текст/HTML td элемента и также разобрать стоимость к целому числу прежде, чем сделать дополнение:

var prices = $('.price');
var total = 0;
 $.each(prices, function(i, price){
  var pc=$(this).text();  
  if (pc!= 'NA'){
       total = total + parseInt(pc,10);
  }});
$('.total').text(total);
0
добавлено
@Evgeniy: в td содержании нет никаких ценностей плавания.
добавлено автор Milind Anantwar, источник
Если нет никакого параметра корня, таким образом, переводчик отступит к поведению по умолчанию, которое, как правило, рассматривает числа как десятичное число, если они не начинают с (октального) ноля или (шестнадцатеричный) 0x. например, Firefox, Хром и IE 9 + рассматривают parseInt ("077") как parseInt ("077", 10). IE8 и ниже удовольствий это как parseInt ("077", 8) That' s, почему необходимо всегда определять корень
добавлено автор Milind Anantwar, источник
по моему скромному мнению parseFloat лучше тогда parseInt , верный номер может быть плаванием, и это может вызвать ошибку в вычислении
добавлено автор Evgeniy, источник
да, есть не в exampled столе, но вы наклоняетесь быть уверенными, что это не появится в напоминании. Только, чтобы избежать возможной ошибки имеет смысл использовать parseFloat
добавлено автор Evgeniy, источник
Спасибо. Позвольте мне попробовать это теперь.
добавлено автор user4635038, источник
Каково использование 10? в parseInt ($ (этот) .text (), 10). Пожалуйста, разъяснитесь.
добавлено автор user4635038, источник

Ваш код, хорошо работающий, проблема - вы concat общее количество так Использование parseInt() , функция разбирает последовательность и возвращает целое число.

parseInt($(this).text() , 10);

Синтаксис

parseInt(string, radix);

Параметры

последовательность

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

корень

Целое число между 2 и 36, который представляет корень (основа в математические системы счисления) вышеупомянутой последовательности. Определить 10 для системы десятичной цифры обычно используется людьми. Всегда определите этот параметр, чтобы устранить беспорядок читателя и гарантировать предсказуемое поведение. Различные внедрения производят отличающийся результаты, когда корень не определяется.

0
добавлено
$(document).ready(function(){
var prices = $('.price');
var total = 0;
$.each(prices, function(i, price)
{
    var val=$(this).text();
    if (val!="NA" && val!="")
       {
         total = total + parseInt(val);
       }
});

$('.total').text(total);
});

Here is the Fiddle

0
добавлено

Получите весь tds, использующий jqyery, петлю через весь tds использование jQuery каждая функция, затем проверьте, содержит ли ток td число, используя isNaN. Если так, сумма, которые оценивают общему количеству.

var sum = 0, elText;
$('.price').each(function (index, element) { 
    elText = element.innerText;
    isNaN(elText) || (sum += parseInt(elText));
});
$('.total').text(sum);

JSFiddle

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском