|
Помогите решить задачку
<!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 Таблица может быть любого размера (но квадратная). |
Цитата:
<!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>
|
Спасибо, а как ее на 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/ - вот вам полезная ссылка я кстати эту задачку видел где-то, может даже тут в форуме. |
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>
|
Спасибо большое, ссылка как заменить функции Jquery, спасибо
|
Цитата:
Рони, я смотрю вы активно на стрелки перешли. |
j0hnik,
как по второму клику |
Цитата:
а вы как бы сделали? |
лучше счетчик в обратную сторону
|
| Часовой пояс GMT +3, время: 06:44. |
|