download functionality added

templates/data.html

@@ -93,23 +93,64 @@
       
         // Function to handle the table data download
         function downloadTableData() {
-          // Implement your download logic here
-          console.log('Downloading table data...');
+          // Get the currently selected table index
+          const selectedTableIndex = $('#table-dropdown').val();
+          
+          // Get the table element
+          const table = document.querySelector(`#content${selectedTableIndex} table`);
+          
+          if (!table) {
+            console.error('No table found');
+            return;
+          }
+
+          // Get table data
+          let csv = [];
+          const rows = table.querySelectorAll('tr');
+          
+          for (const row of rows) {
+            const cells = row.querySelectorAll('th, td');
+            let rowData = [];
+            cells.forEach(cell => {
+              rowData.push('"' + cell.innerText.replace(/"/g, '""') + '"');
+            });
+            csv.push(rowData.join(','));
+          }
+
+          // Combine CSV rows
+          const csvContent = csv.join('\n');
+
+          // Create a Blob with the CSV content
+          const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+          
+          // Create a download link
+          const link = document.createElement('a');
+          if (link.download !== undefined) {
+            const url = URL.createObjectURL(blob);
+            link.setAttribute('href', url);
+            link.setAttribute('download', 'table_data.csv');
+            link.style.visibility = 'hidden';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          }
         }
-      </script>
-      <script>
-          var req_tables = {{ req_tables | safe }};
-      </script>
-      <script>
-          document.addEventListener("DOMContentLoaded", function() {
-              console.log("Entered")
-              var dropdown = document.getElementById("table-dropdown");
-              console.log("The value is , ", dropdown.value)
-              var hiddenField = document.getElementById("hiddenField");
+      
+        // ... rest of the existing code ...
+    </script>
+    <script>
+        var req_tables = {{ req_tables | safe }};
+    </script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            console.log("Entered")
+            var dropdown = document.getElementById("table-dropdown");
+            console.log("The value is , ", dropdown.value)
+            var hiddenField = document.getElementById("hiddenField");
 
-              dropdown.addEventListener("change", function() {
-                  hiddenField.value = dropdown.value;
-              });
-          });
-      </script>
+            dropdown.addEventListener("change", function() {
+                hiddenField.value = dropdown.value;
+            });
+        });
+    </script>
 {% endblock %}