<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Table Row to CSV</title>
</head>
<body>
<table>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Cherry</td>
<td><a class="export-btn">Export</a></td>
</tr>
<tr>
<td>Dog</td>
<td>Cat</td>
<td>Bird</td>
<td><a class="export-btn">Export</a></td>
</tr>
</table>
<script>
// Select all export buttons
const exportButtons = document.querySelectorAll('.export-btn');
// Add event listener to each export button
exportButtons.forEach(button => {
button.addEventListener('click', () => {
// Get the parent row of the clicked button
const row = button.closest('tr');
// Get all cells in the row except the last one (which contains the export button)
const cells = Array.from(row.querySelectorAll('td'));
cells.pop(); // Remove the last cell (the button cell)
// Extract the text content of each cell and wrap them in double quotes (CSV format)
const cellValues = cells.map(cell => `"${cell.textContent}"`);
// Create the CSV data by joining cell values with commas
const csvData = cellValues.join(',');
// Create a temporary anchor element for the download
const anchor = document.createElement('a');
anchor.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvData);
anchor.download = 'row_data.csv';
// Programmatically click the anchor to trigger the download
anchor.click();
});
});
</script>
</body>
</html>
In this tutorial, we’ve learned how to export individual table rows as CSV files using plain JavaScript. By attaching event listeners to "Export" buttons within each row, we were able to dynamically generate CSV files based on the data in each row. This functionality can be especially useful in applications where users need to download specific data sets for further analysis.