Javascript-форум - вывести в td table сумму значений $s

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - вывести в td table сумму значений $s_id снизу вверх (https://javascript.ru/forum/dom-window/54024-vyvesti-v-td-table-summu-znachenijj-%24s_id-snizu-vverkh.html)

вывести в td table сумму значений $s_id снизу вверх

есть столбцы с ячейками значений, нужно дополнительно вывести сумму значений снизу вверх (если сумма меньше нуля - то отобразить красным цветом, показал на картинке
например код такой значения $s_id

<td id=s_stroka_$id>$s_id сумма_снизу_вверх summa<br>$s_sposob<td>

>
если нужно - оплачу за помощь.

Не картинки надо показывать, а структуру таблицы, и пояснить, что значит снизу вверх, используется ли jQuery или же решение должно быть без ее использования.

Цитата:

Сообщение от laimas (Сообщение 359001)

лучше на js . например структура таблицы вот такая

<table>
  <tbody>
    <tr>
      <td>описание</td>
      <td>способ</td>
      <td>дальше</td>
    </tr>
    <tr >
      <td >sdfasdfываыв  sdfsdfsdfsdfsdfsd</td>      <td >500&nbsp;&nbsp;&nbsp;s<br>
        яндекс</td>
      <td >650</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdваываываываыва ываываыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id>&nbsp;&nbsp;&nbsp;&nbsp;s<br>
        &nbsp;</td>
      <td >&nbsp;</td>
    </tr>
    <tr >
      <td >dfasdfssdfsdf ываываываыв ыва ваываываываываыва ываываыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id>&nbsp;&nbsp;&nbsp;&nbsp;s<br>
        &nbsp;</td>
      <td >&nbsp;</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdваыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id>-75&nbsp;&nbsp;&nbsp;s<br>
        яндекс</td>
      <td >150</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdsdfsdfsd</td>      <td id=s_stroka_$id>&nbsp;&nbsp;&nbsp;&nbsp;s<br>
        &nbsp;</td>
      <td >&nbsp;</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdываваыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id >50&nbsp;&nbsp;&nbsp;s<br>
        киви</td>
      <td >150</td>
    </tr>
    <tr >
      <td >делайте по минимуму, ничего    привет </td>
      <td id=s_stroka_$id>&nbsp;&nbsp;&nbsp;&nbsp;s<br>
        &nbsp;</td>
      <td >&nbsp;</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdывыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id>50&nbsp;&nbsp;&nbsp;s<br>
        киви</td>
      <td >100</td>
    </tr>
  </tbody>
</table>

Сумма всех значений в колонке таблицы

_Eldar_, css внизу из-за ie
нужную колонку указать в строке 35

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  </head>

<body>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>-400</td>
        <td>2</td>
    </tr>
    <tr>
        <td>100</td>
        <td>2</td>
    </tr>
    <tr>
        <td>-10</td>
        <td>2</td>
    </tr>
    <tr>
        <td></td>
        <td>2</td>
    </tr>
</table>
<script>
   var td = document.querySelectorAll('table td:nth-child(1)') ;
    function sum(previousSum, currentItem) {
   var result = previousSum +  +currentItem.innerHTML||0;
   currentItem.dataset.text = result;
   result < 0 && currentItem.classList.add('red');
   return result;
}
Array.prototype.reduceRight.call(td,sum,0)
</script>
<style type="text/css">
  td:nth-child(1):after  {
      display: block;
      float: right;
      content:attr(data-text);
      color: #006400;
      background-color: #FFFACD;
      font-size: 90%;
      padding: 2px;
  }
  td.red:nth-child(1):after  {
      color: #FF3333;
        }
</style>
</body>

</html>

:victory: спасибо, у вас отдельная ячейка со значениями, а если в ячейке несколько символов - так можно? например такая ячейка
<td id=s_stroka_$id>число summa
<br>дополн.текст</td>

_Eldar_,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  </head>

<body>
<table>
  <tbody>
    <tr>
      <td>описание</td>
      <td>способ</td>
      <td>дальше</td>
    </tr>
    <tr >
      <td >sdfasdfываыв  sdfsdfsdfsdfsdfsd</td>      <td >500&nbsp;&nbsp;&nbsp;s<br>
        яндекс</td>
      <td >650</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdваываываываыва ываываыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id>&nbsp;&nbsp;&nbsp;&nbsp;s<br>
        &nbsp;</td>
      <td >&nbsp;</td>
    </tr>
    <tr >
      <td >dfasdfssdfsdf ываываываыв ыва ваываываываываыва ываываыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id>&nbsp;&nbsp;&nbsp;&nbsp;s<br>
        &nbsp;</td>
      <td >&nbsp;</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdваыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id>-75&nbsp;&nbsp;&nbsp;s<br>
        яндекс</td>
      <td >150</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdsdfsdfsd</td>      <td id=s_stroka_$id>&nbsp;&nbsp;&nbsp;&nbsp;s<br>
        &nbsp;</td>
      <td >&nbsp;</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdываваыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id >-50&nbsp;&nbsp;&nbsp;s<br>
        киви</td>
      <td >150</td>
    </tr>
    <tr >
      <td >делайте по минимуму, ничего    привет </td>
      <td id=s_stroka_$id>&nbsp;&nbsp;&nbsp;&nbsp;s<br>
        &nbsp;</td>
      <td >&nbsp;</td>
    </tr>
    <tr >
      <td >dfasdfsdfsdfsdfs dfsdывыв  sdfsdfsdfsdfsdfsd</td>      <td id=s_stroka_$id>50&nbsp;&nbsp;&nbsp;s<br>
        киви</td>
      <td >100</td>
    </tr>
  </tbody>
</table>

<script>
   var td = document.querySelectorAll('table tr:nth-child(n+2) td:nth-child(2)') ;
    function sum(previousSum, currentItem) {
   var num = parseFloat(currentItem.innerHTML)||0
   var result = previousSum +  num;
   currentItem.innerHTML = num + '&nbsp; <span>' + result + '</span><br>'+ currentItem.innerHTML.split('<br>')[1];    result < 0 && currentItem.classList.add('red');
   return result;
}
Array.prototype.reduceRight.call(td,sum,0)
</script>
<style type="text/css">
  td:nth-child(2) span  {
      display: block;
      float: right;

      color: #006400;
      background-color: #FFFACD;
      font-size: 90%;
      padding: 2px;
  }
  td.red span  {
      color: #FF3333;
        }
</style>
</body>

</html>

сейчас теряется текст из ячейки <br>выафыа

_Eldar_,
а сами не хотите сформировать нужный вам результат?

Цитата:

а сами не хотите сформировать нужный вам результат?

хочу, но не умею :cray: , надо как-то выделить текст начиная с <br> и потом добавлять к результату

_Eldar_,
смотрите пост 6 снова