Показать сообщение отдельно
  #3 (permalink)  
Старый 17.05.2017, 13:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

сумма всех строк в таблице
Вадим Вадимыч,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .sumItg{
    font-weight: bold;
    color: hsla(0, 100%, 50%, 1);
  }
  #parent{
    font-weight: bold;
    color: hsla(240, 100%, 50%, 1);
  }

  </style>

  <script>

    window.addEventListener('DOMContentLoaded', function() {
      var a = document.querySelectorAll('.sum1'),
      b = document.querySelectorAll('.sum2'),
      c = document.querySelectorAll('.sumItg'),
      span = document.querySelector('#parent');
      span.innerHTML = [].reduce.call( a, function(sum, td, i) {
                var w = +td.innerHTML||0, h = +b[i].innerHTML || 0 ;
                return sum + (c[i].innerHTML = w * h)
         }, 0);
        });
  </script>
</head>

<body>
<table class="table table-bordered">
<thead>
</thead>
<tbody>
<tr>
<td class="text-center">17-И</td>
<td>Устройство натяжного потолка из ПВХ</td>
<td class="text-center">м2</td>
<td class="sum1 text-center">2</td>
<td class="sum2 text-center">2</td>
<td class="sumItg text-right"></td>
</tr>
<tr>
<td class="text-center">17-И</td>
<td>Устройство натяжного потолка из ПВХ</td>
<td class="text-center">м2</td>
<td class="sum1 text-center">2</td>
<td class="sum2 text-center">7</td>
<td class="sumItg text-right"></td>
</tr>
<tr>
<td class="text-center">17-И</td>
<td>Устройство натяжного потолка из ПВХ</td>
<td class="text-center">м2</td>
<td class="sum1 text-center">3</td>
<td class="sum2 text-center">3</td>
<td class="sumItg text-right"></td>
</tr>
</tbody>
</table>
<span id="parent"></span>


</body>
</html>
Ответить с цитированием