Взять .text() с таблицы thead tr td и поместить в атрибут tbody tr td По порядку
<table>
<thead>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</tbody>
</table>
Была вот такая таблица https://monosnap.com/file/uL2JnN5bTZ...jHFtWEsXmZVP76 НА мобильной версии хотят чтобы заголовки были напротив каждой td https://monosnap.com/file/hcjTNhaEAK...9mo8ynTidRC7pz Я решил взять значения thead tr td и продублировать в tbody tr td (аттрибут) чтобы в дальнейшем использовать :before и вывести на мобильной версии Хочу чтобы получилось вот так https://monosnap.com/file/9vcNEcVpjF...6xDTWIXeeP5blJ Я уже собрал thead tr td в массив но как теперь проставить это все в нужное место? (для каждого td)
var array = [];
$('thead tr').each(function(){
var array_row = [];
$(this).find('td').each(function(){
array_row.push($(this).text());
});
array.push(array_row);
});
|
HolySong,
код таблицы который хотите получить? |
Вот так должно стать. Должны появиться атрибуты в tbody tr td data-th=""
<table>
<thead>
<tr>
<td>Заголовок 1</td>
<td>Заголовок 2</td>
<td>Заголовок 3</td>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Заголовок 1">Ячейка 4</td>
<td data-th="Заголовок 2">Ячейка 5</td>
<td data-th="Заголовок 3">Ячейка 6</td>
</tr>
<tr>
<td data-th="Заголовок 1">Ячейка 7</td>
<td data-th="Заголовок 2">Ячейка 8</td>
<td data-th="Заголовок 3">Ячейка 9</td>
</tr>
</tbody>
</table>
Я немного доработал свой код но пока выводится к всем атрибутам только первый элемент массива, нужно добавить итератор но пока не получается
var array = [];
$('thead tr').each(function(){
$(this).find('td').each(function(){
array.push($(this).text());
});
});
console.log(array);
$('tbody tr').each(function(){
$(this).find('td').each(function(){
$(this).attr("data-th", array[0]);
});
});
|
HolySong,
ок! |
HolySong,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
tbody td:hover:after {
content: attr(data-th);
color: #FF0000;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let table = document.querySelector('table');
let txt = Array.from(table.querySelectorAll('thead td'), ({
textContent
}) => textContent);
let len = txt.length;
table.querySelectorAll('tbody td').forEach((td, i) => td.dataset.th = txt[i % len])
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<td>Заголовок 1</td>
<td>Заголовок 2</td>
<td>Заголовок 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Спасибо огромное но не могли бы вы переписать на jquery, а то ваш код в дальнейшем не смогу редактировать. (у меня к сожалению переписать не получается)
Заранее благодарю |
HolySong,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
tbody td:hover:after {
content: attr(data-th);
color: #FF0000;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
let table = $('table');
let txt = $.map($('thead td', table), ({
textContent
}) => textContent);
let len = txt.length;
$('tbody td', table).each((i, td) => td.dataset.th = txt[i % len])
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<td>Заголовок 1</td>
<td>Заголовок 2</td>
<td>Заголовок 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</tbody>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 18:41. |