21.06.2019, 11:26
|
 |
Интересующийся
|
|
Регистрация: 30.05.2014
Сообщений: 21
|
|
|
Разбивка набора элементов div из таблицы по 4 штуки и объединение их в td по 4 штуки
Добрый день, есть задачка, нужно объединить список элементов в блоки по 4 штуки, но начинать это с 9 элемента и потом уже с конца этого 9 элемента оборачивать остальные элементы после 9, оборачивая их в див по 4 штуки.
Вот код:
<table>
<tr id="item_1">
<td>
<div></div>
</td>
</tr>
<tr id="item_2">
<td>
<div></div>
</td>
</tr>
<tr id="item_3">
<td>
<div></div>
</td>
</tr>
<tr id="item_4">
<td>
<div></div>
</td>
</tr>
<tr id="item_5">
<td>
<div></div>
</td>
</tr>
<tr id="item_6">
<td>
<div></div>
</td>
</tr>
<tr id="item_7">
<td>
<div></div>
</td>
</tr>
<tr id="item_8">
<td>
<div></div>
</td>
</tr>
<tr id="item_9">
<td>
<div></div>
</td>
</tr>
<tr id="item_10">
<td>
<div></div>
</td>
</tr>
<tr id="item_11">
<td>
<div></div>
</td>
</tr>
<tr id="item_12">
<td>
<div></div>
</td>
</tr>
<tr id="item_13">
<td>
<div></div>
</td>
</tr>
<tr id="item_14">
<td>
<div></div>
</td>
</tr>
<tr id="item_15">
<td>
<div></div>
</td>
</tr>
<tr id="item_16">
<td>
<div></div>
</td>
</tr>
<tr id="item_17">
<td>
<div></div>
</td>
</tr>
<tr id="item_18">
<td>
<div></div>
</td>
</tr>
<tr id="item_19">
<td>
<div></div>
</td>
</tr>
<tr id="item_20">
<td>
<div></div>
</td>
</tr>
<tr id="item_21">
<td>
<div></div>
</td>
</tr>
<tr id="item_22">
<td>
<div></div>
</td>
</tr>
<tr id="item_23">
<td>
<div></div>
</td>
</tr>
<tr id="item_24">
<td>
<div></div>
</td>
</tr>
<tr id="item_25">
<td>
<div></div>
</td>
</tr>
<tr id="item_26">
<td>
<div></div>
</td>
</tr>
<tr id="item_27">
<td>
<div></div>
</td>
</tr>
<tr id="item_28">
<td>
<div></div>
</td>
</tr>
<tr id="item_29">
<td>
<div></div>
</td>
</tr>
<tr id="item_30">
<td>
<div></div>
</td>
</tr>
</table>
А нужно получить в итоге такой вид:
<table>
<tr id="item_1">
<td>
<div></div>
</td>
</tr>
<tr id="item_2">
<td>
<div></div>
</td>
</tr>
<tr id="item_3">
<td>
<div></div>
</td>
</tr>
<tr id="item_4">
<td>
<div id="30"></div>
</td>
</tr>
<tr id="item_5">
<td>
<div id="item_26"></div>
<div id="item_27"></div>
<div id="item_28"></div>
<div id="item_29"></div>
</td>
</tr>
<tr id="item_6">
<td>
<div id="item_22"></div>
<div id="item_23"></div>
<div id="item_24"></div>
<div id="item_25"></div>
</td>
</tr>
<tr id="item_7">
<td>
<div id="item_18"></div>
<div id="item_19"></div>
<div id="item_20"></div>
<div id="item_21"></div>
</td>
</tr>
<tr id="item_8">
<td>
<div id="item_14"></div>
<div id="item_15"></div>
<div id="item_16"></div>
<div id="item_17"></div>
</td>
</tr>
<tr id="item_9">
<td>
<div id="item_10"></div>
<div id="item_11"></div>
<div id="item_12"></div>
<div id="item_13"></div>
</td>
</tr>
</table>
id вставлять не обязательно, главное чтобы 4 div'а брал и добавлял в td начиная с конца #item_9
|
|
21.06.2019, 11:30
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Не проще ли получить коллекцию DIV и построить нужную таблицу?
|
|
21.06.2019, 11:42
|
|
Интересующийся
|
|
Регистрация: 30.05.2014
Сообщений: 21
|
|
Сообщение от laimas
|
|
Не проще ли получить коллекцию DIV и построить нужную таблицу?
|
проще, но мне именно нужна таблица и такая структура. Т.к. каждый div я буду ротировать определенное время и переворачивать их с помощью css3
У меня влазит 9 td на одном экране, нужно создать ротацию, если их больше 9 |
|
21.06.2019, 14:04
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от kiberkun
|
|
но мне именно нужна таблица и такая структура
|
А я что-то иное предлагаю? Получили все div в таблице querySelectorAll(selector). А далее первый срез до нужной ячейки с выводом как есть, а второй срез от этой ячейки по конечную, который развернули, а затем в цикле брать по четыре, разворачивать и выводить - формировать TR, TD, помещая в них. То есть строим новую таблицу, удаляя источник.
Странная, однако, задача. )
PS. Что за источник этих данных/таблицы, над которой нужно так издеваться, нельзя ли изначально получать данные в потребном виде?
Последний раз редактировалось laimas, 21.06.2019 в 14:08.
|
|
21.06.2019, 16:33
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
kiberkun,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 170px;
height: 18px;
background-color: hsl(300, 100%, 27%);
margin: 5px;
}
div:after {
counter-increment: z ;
content: counter(z);
color: hsl(30, 67%, 94%);
display: block;
text-align: center;
}
body {
counter-reset: z 0;
}
td {
border: 1px solid hsl(195, 100%, 50%);
background-color: hsl(150, 100%, 50%);
}
table {
counter-reset: num 0;
border-spacing: 7px 11px;
}
tr:before {
counter-increment: num ;
content: counter(num);
color: hsl(25, 76%, 31%);
}
tr{
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
[...document.querySelectorAll("tr")].reduceRight((accumulator, tr) =>{
if(document.querySelectorAll("tr").length == 9) return accumulator;
if(accumulator.querySelectorAll("div").length == 4) accumulator = tr;
else {accumulator.querySelector("td").append(tr.querySelector("div")); tr.remove()}
return accumulator
})
})
</script>
</head>
<body>
<table>
<tr id="item_1">
<td>
<div></div>
</td>
</tr>
<tr id="item_2">
<td>
<div></div>
</td>
</tr>
<tr id="item_3">
<td>
<div></div>
</td>
</tr>
<tr id="item_4">
<td>
<div></div>
</td>
</tr>
<tr id="item_5">
<td>
<div></div>
</td>
</tr>
<tr id="item_6">
<td>
<div></div>
</td>
</tr>
<tr id="item_7">
<td>
<div></div>
</td>
</tr>
<tr id="item_8">
<td>
<div></div>
</td>
</tr>
<tr id="item_9">
<td>
<div></div>
</td>
</tr>
<tr id="item_10">
<td>
<div></div>
</td>
</tr>
<tr id="item_11">
<td>
<div></div>
</td>
</tr>
<tr id="item_12">
<td>
<div></div>
</td>
</tr>
<tr id="item_13">
<td>
<div></div>
</td>
</tr>
<tr id="item_14">
<td>
<div></div>
</td>
</tr>
<tr id="item_15">
<td>
<div></div>
</td>
</tr>
<tr id="item_16">
<td>
<div></div>
</td>
</tr>
<tr id="item_17">
<td>
<div></div>
</td>
</tr>
<tr id="item_18">
<td>
<div></div>
</td>
</tr>
<tr id="item_19">
<td>
<div></div>
</td>
</tr>
<tr id="item_20">
<td>
<div></div>
</td>
</tr>
<tr id="item_21">
<td>
<div></div>
</td>
</tr>
<tr id="item_22">
<td>
<div></div>
</td>
</tr>
<tr id="item_23">
<td>
<div></div>
</td>
</tr>
<tr id="item_24">
<td>
<div></div>
</td>
</tr>
<tr id="item_25">
<td>
<div></div>
</td>
</tr>
<tr id="item_26">
<td>
<div></div>
</td>
</tr>
<tr id="item_27">
<td>
<div></div>
</td>
</tr>
<tr id="item_28">
<td>
<div></div>
</td>
</tr>
<tr id="item_29">
<td>
<div></div>
</td>
</tr>
<tr id="item_30">
<td>
<div></div>
</td>
</tr>
</table>
</body>
</html>
|
|
26.06.2019, 11:54
|
|
Интересующийся
|
|
Регистрация: 30.05.2014
Сообщений: 21
|
|
|
Сообщение от рони
|
kiberkun,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 170px;
height: 18px;
background-color: hsl(300, 100%, 27%);
margin: 5px;
}
div:after {
counter-increment: z ;
content: counter(z);
color: hsl(30, 67%, 94%);
display: block;
text-align: center;
}
body {
counter-reset: z 0;
}
td {
border: 1px solid hsl(195, 100%, 50%);
background-color: hsl(150, 100%, 50%);
}
table {
counter-reset: num 0;
border-spacing: 7px 11px;
}
tr:before {
counter-increment: num ;
content: counter(num);
color: hsl(25, 76%, 31%);
}
tr{
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
[...document.querySelectorAll("tr")].reduceRight((accumulator, tr) =>{
if(document.querySelectorAll("tr").length == 9) return accumulator;
if(accumulator.querySelectorAll("div").length == 4) accumulator = tr;
else {accumulator.querySelector("td").append(tr.querySelector("div")); tr.remove()}
return accumulator
})
})
</script>
</head>
<body>
<table>
<tr id="item_1">
<td>
<div></div>
</td>
</tr>
<tr id="item_2">
<td>
<div></div>
</td>
</tr>
<tr id="item_3">
<td>
<div></div>
</td>
</tr>
<tr id="item_4">
<td>
<div></div>
</td>
</tr>
<tr id="item_5">
<td>
<div></div>
</td>
</tr>
<tr id="item_6">
<td>
<div></div>
</td>
</tr>
<tr id="item_7">
<td>
<div></div>
</td>
</tr>
<tr id="item_8">
<td>
<div></div>
</td>
</tr>
<tr id="item_9">
<td>
<div></div>
</td>
</tr>
<tr id="item_10">
<td>
<div></div>
</td>
</tr>
<tr id="item_11">
<td>
<div></div>
</td>
</tr>
<tr id="item_12">
<td>
<div></div>
</td>
</tr>
<tr id="item_13">
<td>
<div></div>
</td>
</tr>
<tr id="item_14">
<td>
<div></div>
</td>
</tr>
<tr id="item_15">
<td>
<div></div>
</td>
</tr>
<tr id="item_16">
<td>
<div></div>
</td>
</tr>
<tr id="item_17">
<td>
<div></div>
</td>
</tr>
<tr id="item_18">
<td>
<div></div>
</td>
</tr>
<tr id="item_19">
<td>
<div></div>
</td>
</tr>
<tr id="item_20">
<td>
<div></div>
</td>
</tr>
<tr id="item_21">
<td>
<div></div>
</td>
</tr>
<tr id="item_22">
<td>
<div></div>
</td>
</tr>
<tr id="item_23">
<td>
<div></div>
</td>
</tr>
<tr id="item_24">
<td>
<div></div>
</td>
</tr>
<tr id="item_25">
<td>
<div></div>
</td>
</tr>
<tr id="item_26">
<td>
<div></div>
</td>
</tr>
<tr id="item_27">
<td>
<div></div>
</td>
</tr>
<tr id="item_28">
<td>
<div></div>
</td>
</tr>
<tr id="item_29">
<td>
<div></div>
</td>
</tr>
<tr id="item_30">
<td>
<div></div>
</td>
</tr>
</table>
</body>
</html>
|
а можно вариант на jquery ?
|
|
26.06.2019, 11:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от kiberkun
|
|
а можно вариант на jquery ?
|
в чём проблема, зачем нужно jquery? берите код и используйте |
|
26.06.2019, 12:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
kiberkun,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 170px;
height: 18px;
background-color: hsl(300, 100%, 27%);
margin: 5px;
}
div:after {
counter-increment: z ;
content: counter(z);
color: hsl(30, 67%, 94%);
display: block;
text-align: center;
}
body {
counter-reset: z 0;
}
td {
border: 1px solid hsl(195, 100%, 50%);
background-color: hsl(150, 100%, 50%);
}
table {
counter-reset: num 0;
border-spacing: 7px 11px;
}
tr:before {
counter-increment: num ;
content: counter(num);
color: hsl(25, 76%, 31%);
}
tr{
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("tr").get().reduceRight(function(accumulator, tr){
if($("tr").length == 9) return accumulator;
if($("td > div", accumulator).length == 4) accumulator = tr;
else {$("td", accumulator).prepend($("div", tr)); $(tr).remove()}
return accumulator
})
});
</script>
</head>
<body>
<table>
<tr id="item_1">
<td>
<div></div>
</td>
</tr>
<tr id="item_2">
<td>
<div></div>
</td>
</tr>
<tr id="item_3">
<td>
<div></div>
</td>
</tr>
<tr id="item_4">
<td>
<div></div>
</td>
</tr>
<tr id="item_5">
<td>
<div></div>
</td>
</tr>
<tr id="item_6">
<td>
<div></div>
</td>
</tr>
<tr id="item_7">
<td>
<div></div>
</td>
</tr>
<tr id="item_8">
<td>
<div></div>
</td>
</tr>
<tr id="item_9">
<td>
<div></div>
</td>
</tr>
<tr id="item_10">
<td>
<div></div>
</td>
</tr>
<tr id="item_11">
<td>
<div></div>
</td>
</tr>
<tr id="item_12">
<td>
<div></div>
</td>
</tr>
<tr id="item_13">
<td>
<div></div>
</td>
</tr>
<tr id="item_14">
<td>
<div></div>
</td>
</tr>
<tr id="item_15">
<td>
<div></div>
</td>
</tr>
<tr id="item_16">
<td>
<div></div>
</td>
</tr>
<tr id="item_17">
<td>
<div></div>
</td>
</tr>
<tr id="item_18">
<td>
<div></div>
</td>
</tr>
<tr id="item_19">
<td>
<div></div>
</td>
</tr>
<tr id="item_20">
<td>
<div></div>
</td>
</tr>
<tr id="item_21">
<td>
<div></div>
</td>
</tr>
<tr id="item_22">
<td>
<div></div>
</td>
</tr>
<tr id="item_23">
<td>
<div></div>
</td>
</tr>
<tr id="item_24">
<td>
<div></div>
</td>
</tr>
<tr id="item_25">
<td>
<div></div>
</td>
</tr>
<tr id="item_26">
<td>
<div></div>
</td>
</tr>
<tr id="item_27">
<td>
<div></div>
</td>
</tr>
<tr id="item_28">
<td>
<div></div>
</td>
</tr>
<tr id="item_29">
<td>
<div></div>
</td>
</tr>
<tr id="item_30">
<td>
<div></div>
</td>
</tr>
</table>
</body>
</html>
|
|
26.06.2019, 12:20
|
|
Интересующийся
|
|
Регистрация: 30.05.2014
Сообщений: 21
|
|
|
Сообщение от рони
|
|
в чём проблема, зачем нужно jquery? берите код и используйте
|
не поддерживается .reduceRight(), может через .each() попробовать? |
|
26.06.2019, 14:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
kiberkun,
$(function() {
var trs = $($("tr").get().reverse()), accumulator;
trs.each(function(i, tr){
if($("tr").length == 9) return;
if($("td > div", accumulator).length == 4||!accumulator) accumulator = tr;
else {$("td", accumulator).prepend($("div", tr)); $(tr).remove()}
})
});
|
|
|
|
