problem with hiding an HTML Table's Column
-
hi all, i have this problem, i'm creating a control from the HTML Table element: * I need to hide columns and show others based on client demand. * Sure i want to do all this on the CLient-Side. * I do this by hiding all the cells for the required column using the "style.display = 'none'" code. * The above code works fine but when the column contains lets say about 100 cells or even much more this process take a very long time may be a minute so imagin that i need to hide more than one column. * I think the problem is with the rendring time that is spent on hiding each cell and render then hide a cell and rerender. * What i think that i need is a way to stop rendring until i set all the cells to the style.display = 'none' then render only once. * This method is well known in languages like C++ and C# and many others but i don't know if its available in JavaScript. if anyone know how to sole such a problem please help. thanks for reading.
-
hi all, i have this problem, i'm creating a control from the HTML Table element: * I need to hide columns and show others based on client demand. * Sure i want to do all this on the CLient-Side. * I do this by hiding all the cells for the required column using the "style.display = 'none'" code. * The above code works fine but when the column contains lets say about 100 cells or even much more this process take a very long time may be a minute so imagin that i need to hide more than one column. * I think the problem is with the rendring time that is spent on hiding each cell and render then hide a cell and rerender. * What i think that i need is a way to stop rendring until i set all the cells to the style.display = 'none' then render only once. * This method is well known in languages like C++ and C# and many others but i don't know if its available in JavaScript. if anyone know how to sole such a problem please help. thanks for reading.
So you've got something of a spreadsheet, which you wish to allow client side interaction. Users should be able to hide/display columns??? The problem your facing is in rendering times? The way your doing this now is setting each cell's
displayto none or block??? Well if your doing what I think your doing...your probably right about rendering times. If your iteratively hiding each cell, then the layout engine is recalculating and rendering the document each time you change a cell. So I think it's probably recalculating and rendering each iteration, so instead of doing this iteratively, why not just hide a single element which contains the cells???<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<tr>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<tr>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<tr>
</table>If you use a table layout like that above, then my initial suggested method won't work, cuz you can store columns in a seperate element. So I then suggest, giving each column the same ID and calling something like:
document.getElementById("column_1").style.display='none';
I'm thinking if each column TD element has the same ID, then when you hide it, the browser should recognize that your hiding any elemnt whose ID is somevalue and should only recalculate and render once... Just a suggestion Cheers :) It's frustrating being a genius and living the life of a moron!!!
-
So you've got something of a spreadsheet, which you wish to allow client side interaction. Users should be able to hide/display columns??? The problem your facing is in rendering times? The way your doing this now is setting each cell's
displayto none or block??? Well if your doing what I think your doing...your probably right about rendering times. If your iteratively hiding each cell, then the layout engine is recalculating and rendering the document each time you change a cell. So I think it's probably recalculating and rendering each iteration, so instead of doing this iteratively, why not just hide a single element which contains the cells???<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<tr>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<tr>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<tr>
</table>If you use a table layout like that above, then my initial suggested method won't work, cuz you can store columns in a seperate element. So I then suggest, giving each column the same ID and calling something like:
document.getElementById("column_1").style.display='none';
I'm thinking if each column TD element has the same ID, then when you hide it, the browser should recognize that your hiding any elemnt whose ID is somevalue and should only recalculate and render once... Just a suggestion Cheers :) It's frustrating being a genius and living the life of a moron!!!
it seems a gr8 idea in the begining but when i try it here are the results: 1. the TD doesn't support the "name" attribute, so you can't get the TD's with same name in the getElementByName function as a collection. 2. if you specify the same "id" for the cells of one column and call getElementById this function return the first element with the specified id. anyway thanks for your help and if you hava any suggestions please tell me.
-
it seems a gr8 idea in the begining but when i try it here are the results: 1. the TD doesn't support the "name" attribute, so you can't get the TD's with same name in the getElementByName function as a collection. 2. if you specify the same "id" for the cells of one column and call getElementById this function return the first element with the specified id. anyway thanks for your help and if you hava any suggestions please tell me.
Hercules01 wrote: if you specify the same "id" for the cells of one column and call getElementById this function return the first element with the specified id. So it only removed the first row in that column??? If thats the case...oh man...I dunno...the only other thing I can think of would be fairly intense, but I would think much faster than setting each row to
display: none. What I would suggets now is copy your entire table'sinnerHTMLinto a variable. Then as a user hides a column, you could use regex to quickly strip out the desired columns and change theinnerHTMLto that of a missing column. Not the prettiest of hacks, but I think it should work. It's frustrating being a genius and living the life of a moron!!! -
Hercules01 wrote: if you specify the same "id" for the cells of one column and call getElementById this function return the first element with the specified id. So it only removed the first row in that column??? If thats the case...oh man...I dunno...the only other thing I can think of would be fairly intense, but I would think much faster than setting each row to
display: none. What I would suggets now is copy your entire table'sinnerHTMLinto a variable. Then as a user hides a column, you could use regex to quickly strip out the desired columns and change theinnerHTMLto that of a missing column. Not the prettiest of hacks, but I think it should work. It's frustrating being a genius and living the life of a moron!!!hey man, just wanna tell u to check the tag for the table you add it after the tag like this:
:)