hide column in display table
Question
Is there any way we can hide column of display table,we have media="none" which hides the column .i have tried using
document.getElementById(display_column_name).media="none";
but it is not working, i am stuck while setting attritube of display column in javascript is there any way.As on button select column is to hide/display of display table.
i have checkbox on column header.i have to hide columns of display table.selected column is hiden on button click.
i have also tried using div tag for display column
<div id= "col1" style="display:block">
<display:column paramId="date_disp" paramName="date_disp" property="date_disp" title="Date" sortable="true" headerClass="sortable" decorator="com.commons.ColDateDecorator" style="font-family:Arial, Helvetica, sans-serif;font-size: 12px;height: 25;"/>
</div>
and document.getElementById('col1').style.display="none"; but its not working.
5 answers
solution1
1 2012-04-12 12:35:10
Is it one element that you want to hide or severals ? document.getElementsByName will return you an array of elements so you need to access it like this:
document.getElementsByName(display_column_name)[0].media="none"
If it's just one element and this element has a id consider using this maybe:
getElementById()
Also i assume display_column_name is a variable defines previously right?
solution2
0 2012-04-12 12:35:10
The best way to this is to set the css display style to none.
document.getElementById("id _of_the_component").style.display = 'none';
Or you can use jquery Library but you have to download jquery library from jquery.com. Import the script into your page with the script tag and do the following
$("#id _of_the_component).hide();
solution3
0 2012-04-12 12:51:49
Try the following:
HTML:
<html>
<table>
<tr>
<td id="td1">TD1</td>
<td id="td2">TD2</td>
<td id="td3">TD3</td>
</tr>
</table>
</html>
JavaScript:
document.getElementById("td2").style.display = "none";
solution4
0 ACCPTED 2012-04-19 10:25:37
Uchenna is right you can use jquery library
Import the script into your page using script tag
add an attribute "id" or "class" to column you want to hide
and using that class or id you can hide that element.
eg. if you have mantioned id attribute and valuse is "abc"
then you can write :
$(document).ready(function()
{
$("#abc").hide();
});
solution5
0 2012-04-23 09:27:43
modify your display column like :
<display:column class="abc" paramId="date_disp" paramName="date_disp" property="date_disp" title="Date" sortable="true" headerClass="sortable" decorator="com.commons.ColDateDecorator" style="font-family:Arial, Helvetica, sans-serif;font-size: 12px;height: 25;"/>
on button click you can write : lets say you are using button
<input type="submit" value="Submit" id="success" />
then you can use it like :
$('#success').click(function(){
$(".abc").hide();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.