Форум

LinaInverse · #1 (**permalink**) 26.07.2017, 00:05

<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
</head>
<body>
<table>
	<tr><td>1<td>2<td>3
	<tr><td>4<td>5<td>6
	<tr><td>7<td>8<td>9
</table>
</body>
</html>

Дана таблица вида:
1 2 3
4 5 6
7 8 9

По нажатию на кнопку сделайте из нее таблицу:
1 4 7
2 5 8
3 6 9

Таблица может быть любого размера (но квадратная).

рони · #2 (**permalink**) 26.07.2017, 01:26

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

Таблица может быть любого размера ~~(но квадратная).~~

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>
<table>
  <tr><td>1<td>2<td>3
  <tr><td>4<td>5<td>6
  <tr><td>7<td>8<td>9
</table>

<table>
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
  <tr>
      <td>5</td>
      <td>6</td>
  </tr>
  <tr>
      <td>7</td>
      <td>8</td>
  </tr>
  <tr>
      <td>9</td>
      <td>10</td>
  </tr>
</table>

 <script>
document.querySelectorAll("table").forEach(table=>{
var trs = table.querySelectorAll("tr");
var tds = table.querySelectorAll("td");
var t = trs.length;
tds.forEach((td,i) => trs[i%t].append(td));
})


  </script>

</body>
</html>

LinaInverse · #3 (**permalink**) 26.07.2017, 02:05

Спасибо, а как ее на Jquery решить?

j0hnik · #4 (**permalink**) 26.07.2017, 02:10

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

Спасибо, а как ее на Jquery решить?

<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
</head>
<body>
<table>
	<tr><td>1<td>2<td>3
	<tr><td>4<td>5<td>6
	<tr><td>7<td>8<td>9
</table>
___________________________________

<table>
	<tr><td>1<td>2<td>3
	<tr><td>4<td>5<td>6
</table>

<button>Клик</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('button').click(function(){
	$("table").each(function(){
			var trs = $(this).find("tr");
			var tds = $(this).find("td");
			var t = trs.length;
		tds.each(function(i){ 
			 trs.eq(i%t).append($(this));
		});
	});
});
</script>
</body>
</html>

https://plainjs.com/javascript/ - вот вам полезная ссылка

я кстати эту задачку видел где-то, может даже тут в форуме.

рони · #5 (**permalink**) 26.07.2017, 02:15

LinaInverse,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$("table").each((i,table)=>{
var trs = $(table).find("tr");
var tds = $(table).find("td");
var t = trs.length;
tds.each((i,td) => trs[i%t].append(td));
})
});
  </script>
</head>

<body>
<table>
  <tr><td>1<td>2<td>3
  <tr><td>4<td>5<td>6
  <tr><td>7<td>8<td>9
</table>

<table>
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
  <tr>
      <td>5</td>
      <td>6</td>
  </tr>
  <tr>
      <td>7</td>
      <td>8</td>
  </tr>
  <tr>
      <td>9</td>
      <td>10</td>
  </tr>
</table>
</body>
</html>

LinaInverse · #6 (**permalink**) 26.07.2017, 02:19

Спасибо большое, ссылка как заменить функции Jquery, спасибо

j0hnik · #7 (**permalink**) 26.07.2017, 02:25

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

Спасибо большое, ссылка как заменить функции Jquery, спасибо

Типа того

Рони, я смотрю вы активно на стрелки перешли.

рони · #8 (**permalink**) 26.07.2017, 02:31

j0hnik,
как по второму клику ~~вернуть~~ сделать из нового исходное состояние?

j0hnik · #9 (**permalink**) 26.07.2017, 02:41

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

j0hnik,
как по второму клику ~~вернуть~~ сделать из нового исходное состояние?

сделать каждый второй клик вместо append , prepend.
а вы как бы сделали?

j0hnik · #10 (**permalink**) 26.07.2017, 02:43

лучше счетчик в обратную сторону

Форум

Справочник

Discord чат

Курсы javascript