DeveloperBreeze

Web Applications Development Tutorials, Guides & Insights

Unlock 2+ expert-curated web applications tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your web applications skills on DeveloperBreeze.

Exporting Table Row Data to CSV in JavaScript

Tutorial October 24, 2024
php

  • Each row (<tr>) contains three data cells (<td>), followed by an "Export" button that will trigger the export action.
  • The button has a class of export-btn, which we will use to attach event listeners.

Now, we need to write the JavaScript code that will be responsible for generating and downloading the CSV file when the user clicks on the "Export" button.

AJAX with JavaScript: A Practical Guide

Tutorial September 18, 2024
javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX with Fetch API</title>
</head>
<body>
    <button id="fetchDataBtn">Fetch Data</button>
    <div id="dataOutput"></div>

    <script>
        document.getElementById('fetchDataBtn').addEventListener('click', function() {
            fetch('https://jsonplaceholder.typicode.com/posts/1')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    document.getElementById('dataOutput').innerHTML = `
                        <h3>${data.title}</h3>
                        <p>${data.body}</p>
                    `;
                })
                .catch(error => console.error('There was a problem with the fetch operation:', error));
        });
    </script>
</body>
</html>

With the Fetch API: