Call javascript function

Asked

Viewed 3,266 times

2

I have a VB application that builds HTML pages powered by database data. So I can issue reports by inserting the data into an HTML table.

It happens, that sometimes the table becomes too big to be printed and need to remove some columns so that the table structure fits right on paper. You would then need to hide or remove columns when the table exceeds a certain width. But this action should occur in the onload event, because my table is written by a VB program and then the code in JS only goes into action when the page is opened by the user.

As you would then, to remove the columns so that my table always has the width of 2400px for example.

?!?! could help me?

javascript html table
  • 1

    Dude, I don’t know how to give a very direct answer, but I can give you an excellent and very responsive tool to set responsive layouts for your websites. Take a look at Bootstrap http://getbootstrap.com/ . I don’t know if you know it is simply a css, fully responsive, and it has plenty of table layout already ready. Interactive tables, etc. See: http://getbootstrap.com/css/#Tables . Maybe this can help you with a lot of things.

  • 1

    Man, thanks for the tip, I really liked this alternative. However, it still doesn’t solve my question. In the case of this project, the responsive layout has no relevance, but the size of the component itself. But anyway, your tip was cool and I saw a lot of useful stuff there that I even intend to use. Thank you! For now, I just need to know how to remove columns from a table using JS.

1 answer

4


You can use CSS to delete columns just in print:

CSS:

.no-print {
    opacity:.5;
}
@media print {
    .no-print {
        display:none;
    }
}

HTML:

<table>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
<td class="no-print">Coluna 4</td>
</tr>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
<td class="no-print">Coluna 4</td>
</tr>
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
<td class="no-print">Coluna 4</td>
</tr>
</table>

Upshot:

inserir a descrição da imagem aqui

I made a jquery adaptation to Add or Remove the class by clicking on the column:.

jquery:

$('td').click(function() {
    var indice = $(this).index() + 1;
    $(this).parents('table').find('td:nth-child('+indice+')').toggleClass('no-print');
});

jsfiddle demo: http://jsfiddle.net/jaderw/tfmpouse/1/

Browser other questions tagged javascript html table

You are not signed in. Login or sign up in order to post.