Removing columns from a table via Javascript

Question

Removing columns from a table via Javascript

Navigation

#1 by (3 votes)

3

My web page is fed by database data and is formatted as a report, with data entered into an html table. The point is that the database has tables with many columns, which sometimes leave the page too large to replicate the structure of the table inside the page and consequently prevent the print from fits on the paper.

I've developed a method in javascript / jquery, responsible for hiding columns until they fill a pre-determined space. For example, I can force the table to have a final size of 1500pixels wide, so the method deletes columns until the table occupies this space.

However, this does not happen well ... because at first the columns are being hidden and the width of the table decreases, but after a while the columns are being removed but the table continues to occupy the same size, because the columns increase in width.

if(dimensao() == false){
                wt = document.getElementById('tabela').offsetWidth;
                col = document.getElementById('tabela').rows[0].cells.length;
                aux = 0;
                for(col;col>=2;col--){
                    if(wt>1500){
                        $('td:nth-child(' + col + ')').hide();
                        //alert('Coluna ' + col + ' Removida! - Largura : ' + wt);
                        wt = document.getElementById('tabela').offsetWidth;
                        aux++;
                    }
                }
                alert(aux + ' Colunas tiveram de ser removidas!.');
            }
        });

I would like to know how to hide the columns and prevent the remaining columns from increasing their own width, thus making the table shorten its length.

javascript html table

asked by anonymous 12.08.2014 / 18:33

1 answer

Smooth scroll without anchors "Monitoring" application usage

score 3 · Accepted Answer

You can keep the table with width:100% in the css and set the minimum width of the columns with min-width:25% for example.

When I moved with this, I calculated the width of the column with the number of columns being displayed:

var q = Math.round($("table").find("td").length / $("table tr").length) + 1;
var y = $(".table").outerWidth() - 160;
var l = Math.round(y / q);
$("table tr td").css("width",l);
$("table td").css("width",y);

I first find q , dividing the td s by each row of the table and adding 1 because the first column was a TH.

Then I remove the width of the TH, which is fixed.

Then I divide the remaining size (which in my case I imagine is 100%) by the% s of the line% s.

Then I apply this value as width in each td .

It sounds complicated but I do not think you would even need to use it all.