Форум

Chamus · #1 (**permalink**) 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>

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

рони · #2 (**permalink**) 21.04.2014, 13:26

Chamus,
может для начала tbody в table вместо div

Chamus · #3 (**permalink**) 21.04.2014, 13:50

Сообщение от рони

Chamus,
может для начала tbody в table вместо div

Да. Спасибо за замечание.

рони · #4 (**permalink**) 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 · #5 (**permalink**) 21.04.2014, 14:47

Thanks!

Chamus · #6 (**permalink**) 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>

рони · #7 (**permalink**) 21.04.2014, 15:01

Chamus,
$("div") поменять на $("#roni td")

Chamus · #8 (**permalink**) 21.04.2014, 15:24

Сообщение от рони

Chamus,
$("div") поменять на $("#roni td")

Я забыл добавить, что количество столбцов у таблицы с классом journal неизвестно. У таблицы с id roni должно быть количество ячеек столько, сколько столбцов у таблицы с классом journal.

рони · #9 (**permalink**) 21.04.2014, 15:44

Chamus,

<!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 · #10 (**permalink**) 21.04.2014, 17:39

рони, не работает на сайте

Подскажи, что не так!
http://pastebin.com/tvJCpREc
Функция в конце // Расчет

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

Форум

Справочник

Discord чат

Курсы javascript