Unseen columns within an HTML table are also being included in the export

In my HTML table, I have included a drop-down feature for users to select the row they want to view, along with an export button that allows them to save the data in Excel format.

During the exporting process, I encountered an issue where hidden rows were still being exported. To address this, I applied the CSS property display:none and added a class to all hidden rows, removing them before export. However, I noticed that two extra columns were still being exported, which puzzled me.

$("#save").on("click", function() {
        var selectedType = [];
        $.each($(".dropdown-menu input[type='checkbox']:checked"), function() {
            selectedType.push($(this).val());
        });
        $.each($("#salesBreakupTable tr.filterData td:nth-child(2)"), function() {
            if (jQuery.inArray($(this).text(), selectedType) == -1 && $(this).text() != "Total") {
                $(this).parent().css("display", "none");
                $(this).parent().addClass("hide-data"); //class i am adding to hidden rows
            } else {
                $(this).parent().css("display", "");
                $(this).parent().removeClass("hide-data");
            }
        });
    });
    $("#export").click(function() { //export button on click
        var copyTable = $("#salesBreakupTable").clone(false).attr('id', '_copy_dailySales');

        copyTable.insertAfter($("#dailySales"));
        copyTable.find('.hide-data').remove(); //removing rows while exporting

        copyTable.table2excel({
            filename: "Daily Sales Report.xls"
        });
        copyTable.remove();
    });

Link to Fiddle

When selecting credit from the drop-down, the exported result shows two extra columns highlighted in red after the table:

https://i.sstatic.net/tDegr.png

To clarify, the additional columns are caused by fixing certain columns with data-tables, specifically the first two columns, resulting in their inclusion during export.

Note

While I considered using Data-tables, its limitation of not supporting col-span during export made it unsuitable as it aligned all columns to the left, presenting a poor display in Excel.

Edit

This recent discovery sheds light on why the extra columns are being exported, attributed to the fixed columns set with Data-tables, noticeable with the first two columns in this case.

Edit

If there are alternative approaches worth exploring, I am open to suggestions. Despite attempting Data-tables, the lack of support for columns with col-span led me to utilize table2export for exporting purposes.

Answer №1

If you include the following code snippet, it will help you achieve the desired outcome:

$('.tableElement').find('.fixedColumnsWrapper').remove(); //eliminating fixed columns during export

You can also check out the revised code on this jsFiddle link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating the dropdown sub menus in Bootstrap using keyboard shortcuts

Enabling WCAG compliance for a dropdown menu requires keyboard navigability, in addition to mouse functionality. It seems that the bootstrap developers removed sub-menu support some time ago due to mobile unfriendliness, but my specific needs are limited t ...

Steps for toggling between enabling and disabling the 2 instances of bvalidator

Running on my form are two instances of bvalidator found at . The first instance validates the entire form, while the second instance only partially validates the same form. In total, the form contains 2 buttons: The first button saves form data upon va ...

Error with an Array of Objects in an Array when using Angular and Typescript

Our system has an array called "food/essen" with a total of 10 items. The food plan is made up of 8 objects from the "Food" array and includes an ID for the week number. An issue we are facing in our web application is that although it recognizes the 8 o ...

What is the best way to replicate text in ReactJS?

I need some help with implementing a copy to clipboard feature in ReactJS. My goal is to have text copied to the clipboard when a user clicks on a link. My current setup involves using Chrome 52 and I am only focusing on supporting this browser at the mom ...

Retrieve data from one array using information from another array. Alternatively, merging the arrays could also be a solution

Welcome, developers, hackers, and watchers! I'm facing an issue that I can't quite wrap my head around, specifically the part where I need to extract data from one array based on another. Would merging them help? Let's take a look at the ...

Troubleshooting issues with jQuery plugin functionality post-upgrade

My previous jQuery version was 1.4 or 1.8, but I upgraded to version 1.10.2 to access newer plugins. However, I encountered a problem - my jQuery code for editing attributes stopped working after the upgrade. Below is the code snippet: <script type="te ...

The timestamp is currently displaying as 2014-11-02T05:00:00.000Z rather than the expected 2014-11-02 00:00:00

Issue: The SELECT * query is returning dates in the wrong format. I am using the mysql2 module to run connection.query() and pass data to a server-side variable, then accessing it on the client-side with AJAX. router.post('/applicants', functi ...

I am having trouble grasping the concept of CSS and the first-child selector

I am having an issue with the first-child selector in CSS. I have two divs with the same class, each containing an image and a paragraph element. When I use the .div-class:first-child {margin:10} rule, the margin is only applied to the paragraph in the fir ...

Retrieve the ID of the image element using Jquery from a collection of images within a div container

I'm encountering a simple issue that I can't seem to solve. I am working on a basic slider/gallery with the following functionalities: 1) "If button 1 is clicked, image one will appear." 2) "Clicking on button 2 will make IMAGE 1 slide left and I ...

Resolve the 'undefined offset error' in Drupal Views Nivo Slider

After updating to the latest version of Drupal, I encountered an error while trying to use the "Views Nivo Slider" module. I keep seeing this error message: Notice: Undefined offset: 0 in template_preprocess_views_nivo_slider_view_nivo_sliderfields() (lin ...

Tips for enabling an element to exceed the bounds of a scrollable container

I am facing an issue with my menu where it has grown in size, making it necessary to have a scroll function for easier navigation. I have successfully implemented the scrolling feature. However, within this menu is a submenu that should extend out to the ...

The Motion of Rotating and Moving Items

Rotating and translating objects can be tricky. While you can successfully perform both actions, the challenge arises when rotating objects as their orientation gets lost -- causing the objects to move in the direction they are facing. if( keyboar ...

Is there a way to switch the main image by clicking on different thumbnails in a sidebar using javascript/jQuery

Currently on my page, I have a large plot created with jqplot along with a sidebar containing several smaller plots. I am trying to find a way to dynamically change the large plot based on which of the smaller plots the user clicks on, without needing to ...

Incorporate jQuery to dynamically replace the navigation on the home page with a randomly selected navigation every time the user refreshes the page

As a newcomer to jQuery, I've been struggling to find a suitable plugin or script to achieve my desired effect. Most scripts I've come across either randomly change background images or auto-refresh rotators, which don't quite fit my needs. ...

Error message: Invalid label detected in Jquery ajax request

I am currently trying to make an ajax call to the URL below: However, I keep encountering an invalid label error in the firebug console. I have included my ajax code below. Can you please review it and let me know if there is something wrong with it? //M ...

Using a Function as an Argument to Return an Unnamed Object

There seems to be a common trend in JavaScript code where a function is passed as a parameter, which in turn returns an anonymous object. myFunction(function() { return { foo: 'bar' }; }); What benefits or reasons are there for u ...

Bespoke String Implementation

Can someone help me find a dual approach? I am interested in customizing strings based on type. I want to be able to determine the type of a string different from a primitive string during runtime. Take a look at this code: class TZDatabaseName extends ...

Utilizing ReactJs refs to set focus on an input element

Exploring the use of refs in ReactJs to focus a textbox from a button click. Encountering the following error message: bundle.js:114 Uncaught TypeError: Cannot read property 'focus' of undefined Check out the Source Code below: class FocusTex ...

django leaflet - dynamically adjusting controls on HTML page with the click of a button

Presently, I am utilizing django-leaflet along with leaflet-draw controls. My goal is to make the draw controls accessible (and add them to the map) based on a specific event, such as toggling a button. Below is a basic jQuery structure that I currently h ...

Is it possible to obtain the output of a JavaScript file directly? (kind of like AJAX)

My previous experience with AJAX involved a server-side language like PHP generating xHTML with attached JS. The JS would then query another file using parameters set in either GET or POST. The output of the queried file would be returned to the JS, which ...