Для создания таблицы с возможностью скачивания выбранных строк в HTML/JavaScript можно использовать несколько подходов. Рассмотрим два из них.
1. Использование библиотеки DataTables:
Библиотека DataTables является мощным инструментом для создания и управления таблицами в HTML. Она предоставляет ряд функций, включая возможность скачивания данных из таблицы. Вот пример кода:
<!DOCTYPE html>
<html>
<head>
<title>Таблица со скачиваемыми строками</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>25</td>
</tr>
<tr>
<td>Петр</td>
<td>Петров</td>
<td>30</td>
</tr>
<tr>
<td>Александр</td>
<td>Сидоров</td>
<td>35</td>
</tr>
</tbody>
</table>
<a href="#" id="downloadButton">Скачать выбранные строки</a>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#myTable').DataTable();
$('#downloadButton').click(function() {
var selectedRowsData = table.rows({ selected: true }).data().toArray();
var csvContent = "data:text/csv;charset=utf-8,";
selectedRowsData.forEach(function(rowData, index) {
var dataString = rowData.join(",");
csvContent += index === 0 ? dataString : "n" + dataString;
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "selectedRows.csv");
document.body.appendChild(link);
link.click();
});
});
</script>
</body>
</html>
В данном примере используется библиотека DataTables для создания таблицы с данными. При клике на ссылку "Скачать выбранные строки" будет происходить следующее:
- Получаем все выбранные строки с помощью метода rows({ selected: true }), преобразуем их в массив данных с помощью метода data().toArray().
- Создаем содержимое файла CSV с помощью цикла forEach.
- Создаем ссылку для скачивания файла и автоматически нажимаем на нее.
2. Использование только HTML и JavaScript:
Если вы не хотите использовать сторонние библиотеки, вы можете создать таблицу и функционал скачивания данных самостоятельно. Вот пример кода:
<!DOCTYPE html>
<html>
<head>
<title>Таблица со скачиваемыми строками</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>25</td>
</tr>
<tr>
<td>Петр</td>
<td>Петров</td>
<td>30</td>
</tr>
<tr>
<td>Александр</td>
<td>Сидоров</td>
<td>35</td>
</tr>
</tbody>
</table>
<a href="#" id="downloadButton">Скачать выбранные строки</a>
<script>
function downloadSelectedRows() {
var table = document.getElementById("myTable");
var selectedRows = [];
for (var i = 1; i < table.rows.length; i++) {
var row = table.rows[i];
var isChecked = row.querySelector("input[type=checkbox]").checked;
if (isChecked) {
selectedRows.push(Array.from(row.cells).map(cell => cell.innerHTML));
}
}
if (selectedRows.length === 0) {
alert("Выберите строки, чтобы загрузить их.");
return;
}
var csvContent = "data:text/csv;charset=utf-8,";
selectedRows.forEach(function(rowData, index) {
var dataString = rowData.join(",");
csvContent += index === 0 ? dataString : "n" + dataString;
});
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "selectedRows.csv");
document.body.appendChild(link);
link.click();
}
document.getElementById("downloadButton").addEventListener("click", downloadSelectedRows);
</script>
</body>
</html>
В данном примере мы используем обычную HTML-таблицу и добавляем функционал с использованием JavaScript. При клике на ссылку "Скачать выбранные строки" происходит следующее:
- Проходим по каждой строке таблицы, ищем элемент input[type=checkbox] и проверяем его состояние. Если флажок выбран, добавляем данные строки в массив selectedRows.
- Проверяем, что хотя бы одна строка выбрана. Если не выбрана, показываем предупреждающее сообщение.
- Создаем содержимое файла CSV с помощью цикла forEach.
- Создаем ссылку для скачивания файла и автоматически нажимаем на нее.
Оба этих подхода позволяют создать таблицу со списком данных и возможностью скачивания выбранных строк в HTML/JavaScript. Выбор конкретного подхода зависит от ваших предпочтений и требований проекта.