HTML表的隐藏列也在导出 [英] Hidden columns of HTML table are also exporting

问题描述

我有一个HTML表格，我有一个下拉列表，也是为了让用户可以看到他想要看到的任何行我有一个导出按钮。当用户点击导出按钮时，我将数据导出到Excel。

导出时我没有导出隐藏行，同时应用CSS属性显示：none 我在那里向所有隐藏的行添加一个类，并在导出时删除它们。但是当我导出数据时，额外的两列正在导出，我不知道为什么。

  $（#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（）！= 总计）{
 $（this）.parent（）。css（display，none）; 
 $（this）.parent（）。addClass（hide-data） ; //我正在添加隐藏行
}其他{
 $（this）.parent（）。css（display，）; 
 $（this）.parent （）。removeClass（hide-data）; 
} 
}）; 
}）; 
 $（＃export）。click（function（）{//单击
 var copyTable = $（＃salesBreakupTable）导出按钮.clone（false）.attr（'id'， '_copy_dailySales'）; 
 
 copyTable.insertAfter（$（＃dailySales））; 
 copyTable.find（'。hide-data'）。remove（）; //删除行导出
 
 copyTable.table2excel（{
 filename：Daily Sales Report.xls
}）; 
 copyTable.remove（）; 
} ）; 
  

两列是额外的表格我已经为红色着色。

注意

由于某些原因，我无法使用数据表，因为数据 - table不导出col-span，它将所有列逐个对齐，然后在Excel中看起来非常糟糕的数据。

编辑

我刚刚找到它导出额外列的原因，我用数据表修复的列是那些列，这里我修复了前两列，因此它们在excel上导出额外的列

编辑

如果还有其他方法我对此持开放态度，我尝试了数据表，但它没有使用col-span导出列，这就是我使用 table2export 的原因。

解决方案

添加此行将为您完成工作：

  copyTable.find（ 'DTFC_LeftWrapper。'）除去（）; //导出
时删除静态列 

以下是更新后的代码

I have an HTML table for which I have a drop-down, also so that user can see whatever row he wants to see I have an export button. When user clicks on export button I am exporting the data to Excel.

While exporting I am not exporting the hidden row, while applying CSS property display:none I am adding a class there to all the hidden rows and removing them while exporting. But still when I export the data extra two columns are exporting, and I don't know why.

$("#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 I am selecting credit from the drop-down it is exporting like this:

Two columns are extra after the table I have colored the red.

Note

For some reasons I cannot use Data-tables because data-tables is not exporting col-span, it aligns all the columns to left one by one, then data which looks very bad in Excel.

Edit

I just found the reason why it is exporting extra columns, the columns which I am fixing with data-tables are those columns, here I have fixed first two columns so they are exporting extra on excel

Edit

If there is any other approach I am open to that, I have tried Data-tables but it is not exporting columns with col-span, that's why I am using table2export.

解决方案

Adding this line will do the job for you:

copyTable.find('.DTFC_LeftWrapper').remove(); //removing static columns while exporting

Here is the fiddle with the updated code

这篇关于HTML表的隐藏列也在导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！