Web Applications Development Tutorials, Guides & Insights

• querySelectorAll('.export-btn'): Selects all elements with the class export-btn, i.e., the export buttons.
• closest('tr'): This retrieves the closest table row (<tr>) that contains the clicked button.
• querySelectorAll('td'): Retrieves all the <td> cells in the row.
• Array.from(): Converts the list of cells into an array, which allows us to manipulate it easily.
• cells.pop(): Removes the last cell (the one containing the export button), as we don’t want it in the CSV.
• textContent: Extracts the text content from each cell.
• encodeURIComponent(): Encodes the CSV string, making it safe for use in a URL.
• anchor.download: Specifies the filename for the CSV file (in this case, row_data.csv).
• anchor.click(): Programmatically triggers a click on the anchor element, which starts the download.

Here’s a complete example of the HTML and JavaScript code together:

• The fetch() method returns a Promise that resolves to the Response object representing the entire HTTP response.
• We check if the response is successful and then parse it as JSON.
• Any errors during the request are caught and logged.

In many real-world applications, you'll need to send data to the server using POST requests. Here's how to send form data using the Fetch API.