У меня есть эта таблица, где я показываю в td белого цвета консолидированную информацию td серого цвета.

Как это:

enter image description here

Поля желтого цвета "- Und" должны отображать сумму полей ниже.

Правильный результат будет выглядеть примерно так:

enter image description here

Я идентифицировал tds по идентификатору, но не могу его сложить.

  • tdgray = серый
  • tdwhite = белый
var total = 0;
$(".tdgray").each(function() {
  total += parseInt($(this).text()) || 0;
});
$(".tdwhite").text(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<TABLE BORDER>
  <TR>
    <TD>price</TD>

  </TR>

  <TR>
    <TD id="tdwhite" class="tdwhite"></TD>
  </TR>
  <TR>
    <TD class="tdgray">421</TD>
  </TR>
  <TR>
    <TD class="tdgray">124</TD>
  </TR>
  <TR>
    <TD class="tdgray">982</TD>
  </TR>
  <TR>
    <TD id="tdwhite" class="tdwhite">Und</TD>
  </TR>
  <TR>
    <TD class="tdgray">200</TD>
  </TR>
  <TR>
    <TD class="tdgray">200</TD>
  </TR>
  <TR>
    <TD class="tdgray">200</TD>
  </TR>
  <TR>
    <TD class="tdgray">200</TD>
  </TR>
</TABLE>

Если вы видите, что результат работает, но добавляет все серые tds и не переходит от записи к записи, у меня есть таблица с более чем 300 белыми tds, может быть проблема, какое-то решение?

СМОТРЕТЬ ПРИМЕР ЗДЕСЬ

0
Myers 27 Ноя 2021 в 23:05
Не используйте .html() используйте .text()
 – 
Daniel A. White
27 Ноя 2021 в 23:11
Я только что отредактировал вопрос с изменением, но, похоже, он остался прежним.
 – 
Bryan
27 Ноя 2021 в 23:38
Можете увидеть здесь пример -> jsfiddle.net/qp8yxfne
 – 
Bryan
27 Ноя 2021 в 23:40

1 ответ

Лучший ответ

Ваше объяснение того, что вам нужно, довольно сбивает с толку.

Я считаю, что это то, что вы ищете. Он использует nextUntil() для циклического перебора строк, которые имеют tdgray после каждого tdwhite, и суммирует эту группу.

$(".tdwhite").text(function() {
  var total = 0;

  $(this).parent().nextUntil(':has(.tdwhite)').each(function() {
    total += parseInt($(this).find('.tdgray').text()) || 0;
  });

  return total

});
.tdwhite{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<TABLE BORDER>
  <TR>
    <TD>price</TD>

  </TR>

  <TR>
    <TD id="tdwhite" class="tdwhite"></TD>
  </TR>
  <TR>
    <TD class="tdgray">421</TD>
  </TR>
  <TR>
    <TD class="tdgray">124</TD>
  </TR>
  <TR>
    <TD class="tdgray">982</TD>
  </TR>
  <TR>
    <TD class="tdwhite">Und</TD>
   
  </TR>
  <TR>
    <TD class="tdgray">200</TD>
    
    
  </TR>
  <TR>
    <TD class="tdgray">200</TD>
  </TR>
  <TR>
    <TD class="tdgray">200</TD>
  </TR>
  <TR>
    <TD class="tdgray">200</TD>
  </TR>
</TABLE>
1
charlietfl 28 Ноя 2021 в 01:22
Идеально! но, если я хочу ввести точно такое же значение, но во вход, который находится внутри этого td? как бы это было?
 – 
Bryan
28 Ноя 2021 в 02:17
Какой класс имеет входы? Можете ли вы обновить свою скрипку, чтобы отразить ее?
 – 
charlietfl
28 Ноя 2021 в 02:44
Посмотрите -> jsfiddle.net/4wh2gqxv/3
 – 
Bryan
28 Ноя 2021 в 03:04