Форум

HolySong · #1 (**permalink**) 18.04.2022, 19:14

<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);
});

рони · #2 (**permalink**) 18.04.2022, 19:43

HolySong,
код таблицы который хотите получить?

HolySong · #3 (**permalink**) 18.04.2022, 20:07

Вот так должно стать. Должны появиться атрибуты в 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]);
	});
});

рони · #4 (**permalink**) 18.04.2022, 20:14

HolySong,
ок!

рони · #5 (**permalink**) 18.04.2022, 20:27

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>

HolySong · #6 (**permalink**) 18.04.2022, 21:06

Спасибо огромное но не могли бы вы переписать на jquery, а то ваш код в дальнейшем не смогу редактировать. (у меня к сожалению переписать не получается)
Заранее благодарю

рони · #7 (**permalink**) 18.04.2022, 21:44

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>

Форум

Справочник

Discord чат

Курсы javascript