CODEWITHSUNDEEP
javascripthtmlexcel
Deepika
Deepika

Reputation: 300

Hide column while exporting to excel from html table using javascript

I have a html table which I have to export to excel , but while doing so, I dont want some of the td elements to be exported. When I apply javascript to hide the td, the changes are being applied only to the view form and not to the the content being exported.

Need help in how to export in this case.

I have included html, css and script all in one page.

<html>
<body>
<div id="myDiv">
<table id="metrics" border="1px" cellspacing="0 px" style="border-style:  solid; border-color: Black;
        border-width: thin;">
        <tr>
            <td style= "background-color: #bfbfbf;  font-size: small; color: black;">
                LOB
            </td>
            <td>
                <span class="hillbillyForm" data-displayname='LOB' style="display:none;"></span>

           </td>
       </tr>
</table>
    <input type="button" id="btnExport"  value="Export" onclick="TableToExcel('metrics');" />
</div>
</body>

Here I want to hide the td which contains span class "hillbillyForm"

The javascript That I am using is 

    function TableToExcel(tableid) {

        var id = $('[id$="' + tableid + '"]');
        var $clonedTable = $("id").clone();
        $clonedTable.find('[style = "display: none"]').remove();
        var strCopy = $('<div></div>').html(id.clone()).html();

        window.clipboardData.setData("Text", strCopy);

        var objExcel = new ActiveXObject("Excel.Application");

        objExcel.visible = false; var objWorkbook = objExcel.Workbooks.Add; var objWorksheet = objWorkbook.Worksheets(1); objWorksheet.Paste; objExcel.visible = true;
    }
</script>

Upvotes: 5

Views: 6238

Answers (1)

A1rPun
A1rPun

Reputation: 16847

So what I'm understanding is that you want to remove all TD's which have a direct child with the class hillbillyForm.

You can do something like this:

const form = document.getElementById('#metrics');
const exportForm = form.cloneNode(true);

exportForm.querySelectorAll('.hillbillyForm').forEach((el) => {
  const td = el.parentElement;
  if (td) td.parentElement.removeChild(td);
});

// do something with exportForm

jsFiddle

Upvotes: 5

Related Questions