Dynamically selecting column from a html table using jQuery

Question

I have a sample fiddle here which contains a html table with print button. I am printing that whole table as,

function printpage() {
    var data = '<table border="1" cellspacing="0"><tr><td colspan="4">Sample Report</td></tr>' + document.getElementsByTagName('table')[0].innerHTML + '</table>';
    data += '<br/><button onclick="window.print()"  class="noprint">Print the Report</button>';
    data += '<style type="text/css" media="print"> .noprint {visibility: hidden;} </style>';
    myWindow = window.open('', '', 'width=800,height=600');
    myWindow.innerWidth = screen.width;
    myWindow.innerHeight = screen.height;
    myWindow.screenX = 0;
    myWindow.screenY = 0;
    myWindow.document.body.innerHTML = data;
    myWindow.focus();
}

But I want to include only the columns containing the non zero values in print preview, i.e. something like as follows:

enter image description here

How it is possible?

Do you want something like if td's any column contains zero, then don't include that column in preview? — Dhanu Gurung
– Dhanu Gurung, Commented Jan 7, 2014 at 10:18
Yes, It should not include in print preview if all the td values of a particular column is zero. — user3102065
– user3102065, Commented Jan 7, 2014 at 10:38

Andrei Андрей Листочкин · Accepted Answer · 2014-01-07 10:46:47Z

2

If I understood correctly, you don't need to remove all cells with 0 values, only those columns where all values are 0. In your print function add this jquery snippet:

var printableTable = $("table").clone();
var columnLen = printableTable.find("tr:nth-child(1)").find("th").size();

for(var i=1; i<=columnLen; i++)
{
    var sum = 0;
    printableTable.find("tr td:nth-child("+i+")").each(function() 
    { 
        var nr = Number($(this).html());
        sum += nr;
    });

    if (sum == 0)
    {
        printableTable.find("tr th:nth-child("+i+")").each(function() {
            $(this).hide();
        });

        printableTable.find("tr td:nth-child("+i+")").each(function() {
            $(this).hide();
        });
    }
}

Than use: printableTable.html() instead of document.getElementsByTagName('table')[0].innerHTML

Working demo: http://jsfiddle.net/er144/84tgF/

edited Jan 7, 2014 at 10:46

Andrei Андрей Листочкин

8,5526 gold badges45 silver badges53 bronze badges

answered Jan 7, 2014 at 10:40

ER144

6904 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3102065 Over a year ago

This is what i needed. Also, just for curiosity, is it possible to hide second column? ie, like in this image.

ER144 Over a year ago

Of course it is possible. In this case you don't need to iterate through the cells, you just need: printTable.find("tr td:nth-child(2)").each(function(){ $(this).hide(); }); And same for the th elements.

Rosmarine Popcorn · Accepted Answer · 2014-01-07 09:53:25Z

0

Well first of all we have to clone that table, and find each td with 0 value.

var table = $("table").clone();
table.find("td").each(function(){
    if(!parseInt($(this).text())){
        $(this).remove();
    }
});

Than we have to remove each td if it's value is 0 and append the cloned table.

var data = '<table border="1" cellspacing="0"><tr><td colspan="4">Sample Report</td></tr>' + table.html() + '</table>';

Here is the updated fiddle http://jsfiddle.net/4d3jj/13/

answered Jan 7, 2014 at 9:53

Rosmarine Popcorn

11k11 gold badges62 silver badges90 bronze badges

Collectives™ on Stack Overflow

Dynamically selecting column from a html table using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related