Помогите решить задачку
<!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,
как по второму клику |
Цитата:
а вы как бы сделали? |
лучше счетчик в обратную сторону
|
Цитата:
|
Цитата:
|
j0hnik,
танцы с бубном, но работает ... :)
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8">
<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>
___________________________________
<table>
<tr><td>1<td>2
<tr><td>3<td>4
<tr><td>5<td>6
<tr><td>7<td>8
</table>
<button>Клик</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var n = 1;
$('button').click(function(){
n ^= 1;
$("table").each(function(){
var trs = $(this).find("tr");
var tds = $(this).find("td");
var t = trs.length;
var l = n ? tds.length/t : 1;
for (var k=0; k<l; k++) {
tds.each(function(i){
i = i % t;
trs.eq(i%t).append(this);
});
tds = $(this).find("td");
}
});
});
</script>
</body>
</html>
|
|
nerv_,
немного не походит, меня интересует вариант с сохранением количества строк и колонок. есть ли какая то функция, сделать тоже самое что в посте №13, но без for. |
извините за вторжение :)
есть вопрос по коду
<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));
})
а именно по вот этой строчке: tds.forEach((td,i) => trs[i%t].append(td)) мы перебираем все ТДшки и далее возвращаем в ТРшки новые ТДшки, допустим в примере у нас
<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>
5 строк и 2 столбца, итого 10 элементов. td = 10, i = 5 ? как это происходит ? tds((1,1) => trs[1%1].append(td)) - для первой ТДшки tds((7,4) => trs[7%4].append(td)) - для седьмой ТДшки tds((8,4) => trs[8%4].append(td)) - для восьмой ТДшки Первую брать смысла нету, возьму седьмую, tds((7,4) => trs[7%4].append(td)) trs[7%4] - остаток есть - три, и типа в третью строчку вставляется седьмая ТДшка ? что-то не сходится у меня :write: Для восьмой: tds((8,4) => trs[8%4].append(td)) trs[8%4] - остатка нет .... |
shoopik,
для первой ТДшки trs[0%5] = tr[0] для седьмой ТДшки trs[6%5] = tr[1] для восьмой ТДшки trs[7%5] = tr[2]
<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>
<table>
<tbody><tr>
<td>1</td><td>6</td></tr>
<tr>
<td>2</td><td>7</td></tr>
<tr>
<td>3</td><td>8</td></tr>
<tr>
<td>4</td><td>9</td></tr>
<tr>
<td>5</td><td>10</td></tr>
</tbody></table>
|
Цитата:
для второй trs[1%5] = tr[0] - непонято, что здесь для третьей trs[2%5] = tr[0] - непонято, что здесь для четвертой trs[3%5] = tr[0] - непонято, что здесь для пятой trs[4%5] = tr[0] - непонято, что здесь для шестой trs[5%5] = tr[0] - непонято, что здесь для седьмой ТДшки trs[6%5] = tr[1] - т.е. она просто вставляется во второй столбик, потому что первый занят уже, если я правильно понял, также и в восьмой. для восьмой ТДшки trs[7%5] = tr[2] |
shoopik,
условно tr[0] строка с индексом ноль или первая строка tr[1] строка с индексом один или вторая строка |
Цитата:
1 2 3 4 5 6 7 8 9 10 для второй trs[1%5] = tr[0] - для третьей trs[2%5] = tr[0] - для четвертой trs[3%5] = tr[0] - для пятой trs[4%5] = tr[0] - для шестой trs[5%5] = tr[0] - |
Цитата:
alert(3%5)// 3 это 4 строка |
Цитата:
ну ладно я понял, спасибо )) |
Цитата:
|
Цитата:
<!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>
<button>Клик</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function swapContent(elem1, elem2) {
var t = elem1.innerHTML;
elem1.innerHTML = elem2.innerHTML;
elem2.innerHTML = t;
}
function transp(table) {
for (var i = 0, rows = table.rows, count = rows.length; i < count; ++i) {
for (var j = i + 1; j < count; ++j) {
swapContent(rows[i].cells[j], rows[j].cells[i]);
}
}
}
$('button').click(function(){
$("table").each(function() { transp(this); });
});
</script>
</body>
</html>
|
Цитата:
|
Цитата:
|
Цитата:
вот сие художество:
<!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
<tr><td>A<td>B<td>C
<tr><td>D<td>E<td>F
</table>
<button>Клик</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function swapContent(elem1, elem2) {
var t = elem1.innerHTML;
elem1.innerHTML = elem2.innerHTML;
elem2.innerHTML = t;
}
function moveCells(table, b1, e1, b2, e2) {
for (var i = b1; i >= e1; --i) {
for (var j = b2; j < e2; ++j) {
table.rows[i].appendChild(table.rows[j].lastChild);
}
}
}
function transp(table) {
var h = table.rows.length;
var w = h && table.rows[0].cells.length;
if (!w) { return; }
var min = Math.min(w, h), max = Math.max(w, h);
// 1) поворачиваем квадратную часть таблицы
for (var i = 0; i < min; ++i) {
for (var j = i + 1; j < min; ++j) {
swapContent(table.rows[i].cells[j], table.rows[j].cells[i]);
}
}
if (w === h) { return; }
if (w > h) {
for (var i = min; i < max; ++i) {
table.insertRow(i);
}
moveCells(table, max - 1, min, 0, min);
} else {
moveCells(table, min - 1, 0, min, max);
for (var i = max - 1; i >= min; --i) {
table.deleteRow(i);
}
}
}
$('button').click(function(){
$("table").each(function() { transp(this); });
});
</script>
</body>
</html>
|
Alexandroppolus,
спасибо, но это Цитата:
необходимый вариант <h4>второй клик</h4> <table> <tbody><tr><td>1</td><td>2</td><td>3 </td></tr><tr><td>4</td><td>5</td><td>6 </td></tr><tr><td>7</td><td>8</td><td>9 </td></tr><tr><td>A</td><td>B</td><td>C </td></tr><tr><td>D</td><td>E</td><td>F </td></tr></tbody></table> <h4>первый клик</h4> <table> <tbody><tr><td>1</td><td>6 </td><td>B</td></tr><tr><td>2</td><td>7</td><td>C </td></tr><tr><td>3 </td><td>8</td><td>D</td></tr><tr><td>4</td><td>9 </td><td>E</td></tr><tr><td>5</td><td>A</td><td>F </td></tr></tbody></table> |
Рони, друг мой =)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div>
<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>
</div>
<button>Клик</button>
<script>
var div = document.querySelector("div").innerHTML, j = 0;
document.querySelector("button").onclick=()=>{
j++;
if(j%2) {
document.querySelectorAll("table").forEach(table=>{
var trs = table.querySelectorAll("tr"), t = trs.length;
var tds = table.querySelectorAll("td");
tds.forEach((td,i) => trs[i%t].append(td));
});
}
else document.querySelector("div").innerHTML=div;
};
</script>
</body>
</html>
надуюсь такое хитровыисканное решение подойдет :) |
Цитата:
if(j%2) k= i%t; else k= abracadabra??? или какой танец с append/prepend |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
j0hnik,
ок. :thanks: |
Цитата:
я нашел еще более изящное решение :thanks:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
table{
transition: 1s;
font-size: 22px;
margin: 20px;
}
td{
transition: 1s;
}
.active{
transform: rotateZ(-90deg) rotateY(180deg);
}
</style>
</head>
<body>
<div>
<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>
</div>
<button>Клик</button>
</body>
<script>
document.querySelector('button').onclick = e => {
document.querySelectorAll('table').forEach(el=>el.classList.toggle('active'));
document.querySelectorAll('td').forEach(el=>el.classList.toggle('active'));
};
</script>
</html>
посмотрите на эту красоту! :dance: |
j0hnik,
интересно, но это снова трансформация, нужно в том и другом случае, чтобы количество строк и столбцов было неизменно. |
| Часовой пояс GMT +3, время: 00:54. |