Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как сложить все ячейки в каждом столбце? (https://javascript.ru/forum/jquery/46724-kak-slozhit-vse-yachejjki-v-kazhdom-stolbce.html)

Chamus 21.04.2014 12:45
Как сложить все ячейки в каждом столбце?
 
Здравствуйте всем.
Я еще только начинаю учить js и попрошу сразу не кидаться камнями.
Мне нужен простой скрипт, который будет брать все значения ячеек из таблицы и суммировать их в столбцах. Иными словами мне нужно получить суммы каждого из столбцов таблицы и вывести их через div.

<!DOCTYPE>
<html>
<head></head>
<body>
	<table class="journal" id="main" >
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
		</tbody>
	</table>

	<div class="val-1"></div> // Значение суммы единиц
	<div class="val-2"></div> // Значение суммы двоек
	<div class="val-3"></div> // Значение суммы троек
	<div class="val-4"></div> // Значение суммы четверок
	<div class="val-5"></div> // Значение суммы пятерок

</body>
</html>


Помогите, пожалуйста :help:

рони 21.04.2014 13:26
Chamus,
может для начала tbody в table вместо div

Chamus 21.04.2014 13:50
Цитата:
Сообщение от рони (Сообщение 308611)
Chamus,
может для начала tbody в table вместо div
Да. Спасибо за замечание.

рони 21.04.2014 14:06
Chamus,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
      $(function () {
          $("div").each(function (indx) {
              var sum = 0;
              $("td:nth-child(" + (indx + 1) + ")", "#main").each(function () {
                  sum += +$(this).text()
              });
              $(this).text(sum)
          });
      })
  </script>
</head>

<body>
<table class="journal" id="main" >
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
		</tbody>
	</table>

	<div class="val-1"></div> // Значение суммы единиц
	<div class="val-2"></div> // Значение суммы двоек
	<div class="val-3"></div> // Значение суммы троек
	<div class="val-4"></div> // Значение суммы четверок
	<div class="val-5"></div> // Значение суммы пятерок
</body>

</html>

Chamus 21.04.2014 14:47
Thanks!

Chamus 21.04.2014 14:58
рони, не хочу наглеть, но спрошу еще кое-что :)

Вот ваша чудесная функция:
$(function () {
          $("div").each(function (indx) {
              var sum = 0;
              $("td:nth-child(" + (indx + 1) + ")", "#main").each(function () {
                  sum += +$(this).text()
              });
              $(this).text(sum)
          });
      })


Помогите, пожалуйста, вывести результат в этой таблице. Эта таблица будет находиться снизу страницы. Каждая ячейка будет под соответствующим столбцом, в которой должна быть сумма значений этого столбца.
<table>
	<tbody>
		<tr id="roni">
			<td>Сумма первого столбца</td>
			<td>Сумма второго столбца</td>
			<td>Сумма третьего столбца</td>
			<td>Сумма четвертого столбца</td>
			<td>Сумма пятого столбца</td>
		</tr>
	</tbody>
</table>

рони 21.04.2014 15:01
Chamus,
$("div") поменять на $("#roni td")

Chamus 21.04.2014 15:24
Цитата:
Сообщение от рони (Сообщение 308623)
Chamus,
$("div") поменять на $("#roni td")
Я забыл добавить, что количество столбцов у таблицы с классом journal неизвестно. У таблицы с id roni должно быть количество ячеек столько, сколько столбцов у таблицы с классом journal.

рони 21.04.2014 15:44
Chamus,
:cray: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td{
    width: 30px;
    text-align: center;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
      $(function () {
          $(".journal tr:first td").each(function (indx) {
              var sum = 0;
              $("td:nth-child(" + (indx + 1) + ")", ".journal").each(function () {
                  sum += +$(this).text()
              });
              $("<td/>",{text:sum}).appendTo("#test")
          });
      })
  </script>
</head>

<body>
<table class="journal" id="main" >
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
		</tbody>
	</table>

	<table>
	<tbody>
		<tr id="test">
		</tr>
	</tbody>
</table>

</body>

</html>

Chamus 21.04.2014 17:39
рони, не работает на сайте :(
Подскажи, что не так!
http://pastebin.com/tvJCpREc
Функция в конце // Расчет

Может не хочет работать, потому что на сайте несколько таблиц.

рони 21.04.2014 18:05
Chamus,
1.как вы собрались складывать нецифровые данные?
2.пользоваться http://pastebin.com неумею.
3.ненадо указвать другие id кроме конечного - это бессмысленно.

Chamus 22.04.2014 10:43
Цитата:
Сообщение от рони (Сообщение 308656)
Chamus,
1.как вы собрались складывать нецифровые данные?
2.пользоваться http://pastebin.com неумею.
3.ненадо указвать другие id кроме конечного - это бессмысленно.
1. isNaN 0
2. Кода очень много, я подумал лучше выложить туда. Выложу тут.
3. Не понял.

Вообще, моя конечная цель сделать так, чтобы к таблицы с классом journal добавлялась в конце строчка с результатами суммы каждого из столбцов. Такие дела. :) Я попросил отдельный скрипт, чтобы вы не копались в куче кода. Я бы потом сам его приделал, но что-то не получилось. :( 

<html>

<head>
<title>Мастер ТЭН - программа компании ООО «Электронагреватели», версия 1.0
</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
// Расчет
$("#tt").click(function () {
goCalc()
});

function goCalc() {
$(".journal tr:first td").each(function (indx) {
  var sum = 0;
  $("td:nth-child(" + (indx + 1) + ")", ".journal").each(function () {
    sum += +$(this).text();
  });
  $('.journal > tbody').append('<td><\/td>');
  // $("<td><\/td>",{text:sum}).appendTo(".journal > tbody > td:last");
});
}
</script>
</head>

<body>
<div class="top1">
<div class="wd" id="top1">

<span id="tt">ТЕСТ</span>

<ul id="tasks" style="display: block;"></ul>

<div class="clear"></div>
</div>
</div>

<div class="top2">
<div class="wd spacer33" id="top-second-menu">
<table border="0" style="display: table;" width="100%">
  <thead>

  </thead>
</table>
</div>
</div>

<div class="wd" id="main" style="display: block;">
<br>

<table class="journal" style="display: table;">
<thead>
  <tr>
    <th id="coloumnsControl">
      <div class="resize"></div>
    </th>
    <th>
      <div style="width: 40px;">
        <span>Номер наряда</span>
      </div>
    </th>
    <th>
      <div style="width: 148px;">
        <span>Пользователь</span>
      </div>
    </th>
    <th>
      <div style="width: 101px;">
        <span>Дата</span>
      </div>
    </th>
    </tr>
</thead>

<tbody>
  <tr>
    <td class=" status-closed">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr style="opacity: 0.3;">
    <td class="">
      <div class="ten" title="ТЭН"></div>

      <div class="transport"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="slab" title="Пластина"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="shtucer" title="Штуцер"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr style="opacity: 0.3;">
    <td class="">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr style="opacity: 0.3;">
    <td class="">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr style="opacity: 0.3;">
    <td class="">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="shtucer" title="Штуцер"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>

    <td class="c cellCol1691">374</td>

    <td>123</td>

    <td class="c cellCol1721">123</td>
  </tr>
</tbody>

<tfoot>
  <tr>
    <td colspan="100"><a class="more" href="#">...</a>
    </td>
  </tr>
</tfoot>
</table>
<br>
</div>
<!-- This page generated in 0.131638 secs by XSLT, SITE MODE -->
</body>

</html>

рони 22.04.2014 13:30
Chamus,
строка 10 несработает -- нет ЕЩЁ элемента с таким id 
$(function ()
{
// сюда ваш код 
})


Цитата:
Сообщение от Chamus
3. Не понял.
appendTo("#testm#testn#test") это равно этому appendTo("#test")

рони 22.04.2014 13:49
Chamus,
<html>

<head>
<title>Мастер ТЭН - программа компании ООО «Электронагреватели», версия 1.0
</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function () {

    $("#tt").click(function () {
        goCalc()
    });

    function goCalc() {
        var tr = $("<tr/>");
        $("<td/>", {
            html: "<div class='' title=''></div>"
        }).appendTo(tr);
        $(".journal > tbody tr:first td:nth-of-type(n+2)").each(function (indx) {
            var sum = 0;
            $("td:nth-child(" + (indx + 2) + ")", ".journal tbody").each(function () {
                sum += +$(this).text();
            });
            $("<td/>", {
                text: sum
            }).appendTo(tr);
        });
        tr.appendTo('.journal > tbody')
    }
})
</script>
</head>

<body>
<div class="top1">
<div class="wd" id="top1">

<span id="tt">ТЕСТ</span>

<ul id="tasks" style="display: block;"></ul>

<div class="clear"></div>
</div>
</div>

<div class="top2">
<div class="wd spacer33" id="top-second-menu">
<table border="0" style="display: table;" width="100%">
  <thead>

  </thead>
</table>
</div>
</div>

<div class="wd" id="main" style="display: block;">
<br>

<table class="journal" style="display: table;">
<thead>
  <tr>
    <th id="coloumnsControl">
      <div class="resize"></div>
    </th>
    <th>
      <div style="width: 40px;">
        <span>Номер наряда</span>
      </div>
    </th>
    <th>
      <div style="width: 148px;">
        <span>Пользователь</span>
      </div>
    </th>
    <th>
      <div style="width: 101px;">
        <span>Дата</span>
      </div>
    </th>
    </tr>
</thead>

<tbody>
  <tr>
    <td class=" status-closed">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr style="opacity: 0.3;">
    <td class="">
      <div class="ten" title="ТЭН"></div>

      <div class="transport"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="slab" title="Пластина"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="shtucer" title="Штуцер"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr style="opacity: 0.3;">
    <td class="">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr style="opacity: 0.3;">
    <td class="">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr style="opacity: 0.3;">
    <td class="">
      <div class="ten" title="ТЭН"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="shtucer" title="Штуцер"></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class=" status-closed">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>
    <td>374</td>
    <td>123</td>
    <td>123</td>
  </tr>

  <tr>
    <td class="">
      <div class="" title=""></div>
    </td>

    <td class="c cellCol1691">374</td>

    <td>123</td>

    <td class="c cellCol1721">123</td>
  </tr>
</tbody>

<tfoot>
  <tr>
    <td colspan="100"><a class="more" href="#">...</a>
    </td>
  </tr>
</tfoot>
</table>
<br>
</div>

</body>

</html>

Chamus 22.04.2014 17:23
Спасибо! Все заработало! :dance: :dance:
Как вы дошли до таких знаний?:)

рони 22.04.2014 18:04
Chamus,
http://learn.javascript.ru/


Часовой пояс GMT +3, время: 00:21.