Solved

Hide Table Col via radio button or similar in Struts Env via javascript etc

Posted on 2010-08-24
8
385 Views
Last Modified: 2013-11-11
Hello,
I have a table from a jsp file below and would like to add a radio button or similar, to hide specific cols on refresh.
I have seen sililar posts but could not adapt for this table.
thanks and regards

<td width="100%" valign="middle" align="left"><logic:notEmpty
name="fecHistoryOutputForm" property="history_list">
<table border="0" cellpadding="5" bgcolor="white" align="center"
      class="citps sortable " width="100%"
      id="unique_id">
      <thead>
            <tr>
            <th class="hed">Scope</th>
            <th class="hed">Firm Trade Id</th>
            <th class="hed">Create Date</th>
            <th class="hed">Create User</th>
            <th class="hed">TRADE_ID</th>
            <th class="hed">TRADE_PART_ID</th>
            <th class="hed">Firm Ex Id</th>
            <th class="hed">Memb Firm</th>
            <th class="hed">Market Side</th>
            <th class="hed">Quantity</th>
            <th class="hed">Price</th>            
            <th class="hed">Alloc_ind</th>
            <th class="hed">ALLOC_GROUP_ID</th>
            <th class="hed">STATUS_CODE</th>
            <th class="hed">CUST_ACCT</th>
            <th class="hed">ORIGIN_CODE</th>
            <th class="hed">MODIFY_DATE</th>
            <th class="hed">MODIFY_USER</th>
            </tr>
      </thead>
      <logic:iterate name="fecHistoryOutputForm" property="history_list"
      id="dataRowID">
            <tr height="5">            
            <td><bean:write name="dataRowID" property="scope" /></td>
            <td><bean:write name="dataRowID" property="firm_trade_id" /></td>
            <td><bean:write name="dataRowID" property="create_date" /></td>
                <td><bean:write name="dataRowID" property="create_user" /></td>
            <td><bean:write name="dataRowID" property="trade_id" /></td>
            <td><bean:write name="dataRowID" property="trade_part_id" /></td>
            <td><bean:write name="dataRowID" property="firm_exchg_id" /></td>
            <td><bean:write name="dataRowID" property="trade_memb_firm" /></td>
            <td><bean:write name="dataRowID" property="market_side" /></td>
            <td><bean:write name="dataRowID" property="quantity" /></td>
            <td><bean:write name="dataRowID" property="price" /></td>      
            <td><bean:write name="dataRowID" property="alloc_ind" /></td>
            <td><bean:write name="dataRowID"property="alloc_group_id" /></td>
            <td><bean:write name="dataRowID" property="status_code" /></td>
            <td><bean:write name="dataRowID" property="cust_acct" /></td>
            <td><bean:write name="dataRowID" property="origin_code" /></td>
            <td><bean:write name="dataRowID" property="modify_date" /></td>
            <td><bean:write name="dataRowID" property="modify_user" /></td>
            </tr>
</logic:iterate>
</table>
</logic:notEmpty></td>
</tr>
</table>
</td>
</tr>
</table>
0
Comment
Question by:Waponi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33523759
Try this :


<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$("#unique_id thead tr th").each(function() {
			$("#checkboxes").append("<input name='checkboxes' class='hideColumn' type='checkbox' value='" + $(this).text() + "' />Hide " + $(this).text() + "<br />");
		});
		$(".hideColumn").click(function() {
			var columnNumber = $(this).index(".hideColumn") + 1;
			if($(this).is(":checked")) {
				$("th:nth-child(" + columnNumber + "),td:nth-child(" + columnNumber + ")", "#mytable" ).hide();
			}
			else {
				$("th:nth-child(" + columnNumber + "),td:nth-child(" + columnNumber + ")", "#mytable" ).show();
			}
		});
	});
</script>

Open in new window

0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 33523770
<head>
<script language="javascript">
function TblHideCol(tblObj, col) {
      var rows= tblObj.rows;
      for (ix = 0; ix < rows.length; ix++) {
         rows[ix].cells[col].style.display='none';
      }
                        
}

//Usage
function HideCol() {
tblObj=document.getElementById('tbl1');
TblHideCol(tblObj,1);
}

</script>
</head>
<body onload="HideCol();">
<table id="tbl1" align="center">
                  <tr>
                        <td>Header Col1</td>
                        <td>Header Col2</td>
                  </tr>
                  <tr>
                        <td>Row 1 Col1</td>
                        <td>Row 1 Col2</td>
                  </tr>
                  <tr>
                        <td>Row 2 Col1</td>
                        <td>Row 2 Col2</td>
                  </tr>
                  <tr>
                        <td>Row 3 Col1</td>
                        <td>Row 3 Col2</td>
                  </tr>
                  <tr>
                        <td>Row 4 Col1</td>
                        <td>Row 4 Col2</td>
                  </tr>
                  <tr>
                        <td>Row 5 Col1</td>
                        <td>Row 5 Col2</td>
                  </tr>
            </table>
</body>
</html>
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33523868

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$("#unique_id thead tr th").each(function() {
			$("#checkboxes").append("<input name='checkboxes' class='hideColumn' type='checkbox' value='" + $(this).text() + "' />Hide " + $(this).text() + "<br />");
		});
		$(".hideColumn").click(function() {
			var columnNumber = $(this).index(".hideColumn") + 1;
			if($(this).is(":checked")) {
				$("th:nth-child(" + columnNumber + "),td:nth-child(" + columnNumber + ")", "#mytable" ).hide();
			}
			else {
				$("th:nth-child(" + columnNumber + "),td:nth-child(" + columnNumber + ")", "#mytable" ).show();
			}
		});
	});
</script>
</head>
<body>
<div id="checkboxes"></div>
<br />
<table id="mytable">
<tr>
	<td width="100%" valign="middle" align="left">
    <logic:notEmpty name="fecHistoryOutputForm" property="history_list">
		<table border="1" cellpadding="5" bgcolor="white" align="center" class="citps sortable " width="100%" id="unique_id">
			<thead>
            	<tr>
                    <th class="hed">Scope</th>
                    <th class="hed">Firm Trade Id</th>
                    <th class="hed">Create Date</th>
                    <th class="hed">Create User</th>
                    <th class="hed">TRADE_ID</th>
                    <th class="hed">TRADE_PART_ID</th>
                    <th class="hed">Firm Ex Id</th>
                    <th class="hed">Memb Firm</th>
                    <th class="hed">Market Side</th>
                    <th class="hed">Quantity</th>
                    <th class="hed">Price</th>            
                    <th class="hed">Alloc_ind</th>
                    <th class="hed">ALLOC_GROUP_ID</th>
                    <th class="hed">STATUS_CODE</th>
                    <th class="hed">CUST_ACCT</th>
                    <th class="hed">ORIGIN_CODE</th>
                    <th class="hed">MODIFY_DATE</th>
                    <th class="hed">MODIFY_USER</th>
				</tr>
			</thead>
<logic:iterate name="fecHistoryOutputForm" property="history_list" id="dataRowID">
        <tr height="5">           
        <td><bean:write name="dataRowID" property="scope" /></td>
        <td><bean:write name="dataRowID" property="firm_trade_id" /></td>
        <td><bean:write name="dataRowID" property="create_date" /></td>
        <td><bean:write name="dataRowID" property="create_user" /></td>
        <td><bean:write name="dataRowID" property="trade_id" /></td>
        <td><bean:write name="dataRowID" property="trade_part_id" /></td>
        <td><bean:write name="dataRowID" property="firm_exchg_id" /></td>
        <td><bean:write name="dataRowID" property="trade_memb_firm" /></td>
        <td><bean:write name="dataRowID" property="market_side" /></td>
        <td><bean:write name="dataRowID" property="quantity" /></td>
        <td><bean:write name="dataRowID" property="price" /></td>      
        <td><bean:write name="dataRowID" property="alloc_ind" /></td>
        <td><bean:write name="dataRowID"property="alloc_group_id" /></td>
        <td><bean:write name="dataRowID" property="status_code" /></td>
        <td><bean:write name="dataRowID" property="cust_acct" /></td>
        <td><bean:write name="dataRowID" property="origin_code" /></td>
        <td><bean:write name="dataRowID" property="modify_date" /></td>
        <td><bean:write name="dataRowID" property="modify_user" /></td>
        </tr>
</logic:iterate>
		</table>
</logic:notEmpty>
	</td>
</tr>
</table>
</body>
</html>

Open in new window

0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

Author Comment

by:Waponi
ID: 33537170
leakim971:
Fantastic solution. Genius! .Thank you very much.
One question, why would the entire table be hidden if the first box is checked ?

<body>
<table width='100%' height='100%' border="0" id="mytable">
<tr>
<td align='center' valign='middle' height='30'></td>
</tr>
<tr>
<td align='center' valign='middle'>
<table border="0" width="100%" cellpadding="0" bgcolor="black">
<tr>
<td align='center' valign='middle'>
<table border="0" width="100%" cellpadding="0" bgcolor="white">
<tr>
<th width="100%" valign="top" align="center">
<h2>History </h2>
</th>
</tr>
<tr>
<td width="100%" valign="middle" height="10" align="right"
style='font-size: 7pt; font-family: Verdana'>
<table cellpadding="2" border="0" width="95%">
<tr>
<html:form action="/Login">
<td width="10%" align="left"><html:submit  styleClass="likeLink" >Home</html:submit></td>
<td width="10%" align="left"><html:button property="Back"
value="Back" styleClass="likeLink" onclick="history.go(-1)"></html:button></td>
</html:form>
<td width="60%" valign="middle" height="10" align="right"
style='text-align: right; font-size: 7pt; font-family: Verdana'>User:
<FONT style="font-weight: bold;"> <bean:write
name="LoginForm" property="userName"></bean:write></FONT></td>
<td width="20%" valign="middle" height="10" align="left"
style='text-align: left; font-size: 7pt; font-family: Verdana'>CIT
Environment:<FONT style="font-weight: bold;"><bean:write
name="LoginForm" property="userEnv"></bean:write></FONT></td>
</tr>
</table>
</td>
</tr>
<tr>

</tr>

<logic:messagesPresent message="true">
<tr>
<td></td>
</tr>
<tr>
<td width="100%" valign="middle" align="center"
style="color: blue; font-size: 10pt; font-family: Verdana"><html:messages
id="message" message="true">
<bean:write name="message" />
</html:messages></td>
</tr>
<tr>
<td></td>
</tr>
</logic:messagesPresent>

<tr>
<td width="100%" valign="middle" align="left"><logic:notEmpty
name="fecHistoryOutputForm" property="history_list">
<table border="0" cellpadding="5" bgcolor="white" align="center"
class="citps" width="100%"
id="unique_id">
<thead>
<tr>
<th class="hed">Scope</th>
<th class="hed">Firm Trade Id</th>
<th class="hed">Create Date</th>
<th class="hed">Create User</th>
<th class="hed">TRADE_ID</th>
<th class="hed">TRADE_PART_ID</th>
<th class="hed">Firm Ex Id</th>
<th class="hed">Memb Firm</th>
<th class="hed">Market Side</th>
<th class="hed">Quantity</th>
<th class="hed">Price</th>
<th class="hed">Alloc_ind</th>
<th class="hed">ALLOC_GROUP_ID</th>
<th class="hed">STATUS_CODE</th>
<th class="hed">CUST_ACCT</th>
<th class="hed">ORIGIN_CODE</th>
<th class="hed">MODIFY_DATE</th>
<th class="hed">MODIFY_USER</th>
</tr>
</thead>
<logic:iterate name="fecHistoryOutputForm" property="history_list"
id="dataRowID">
<tr height="5">
<td><bean:write name="dataRowID" property="scope" /></td>
<td><bean:write name="dataRowID" property="firm_trade_id" /></td>
<td><bean:write name="dataRowID" property="create_date" /></td>
<td><bean:write name="dataRowID" property="create_user" /></td>
<td><bean:write name="dataRowID" property="trade_id" /></td>
<td><bean:write name="dataRowID" property="trade_part_id" /></td>
<td><bean:write name="dataRowID" property="firm_exchg_id" /></td>
<td><bean:write name="dataRowID" property="trade_memb_firm" /></td>
<td><bean:write name="dataRowID" property="market_side" /></td>
<td><bean:write name="dataRowID" property="quantity" /></td>
<td><bean:write name="dataRowID" property="price" /></td>
<td><bean:write name="dataRowID" property="alloc_ind" /></td>
<td><bean:write name="dataRowID" property="alloc_group_id" /></td>
<td><bean:write name="dataRowID" property="status_code" /></td>
<td><bean:write name="dataRowID" property="cust_acct" /></td>
<td><bean:write name="dataRowID" property="origin_code" /></td>
<td><bean:write name="dataRowID" property="modify_date" /></td>
<td><bean:write name="dataRowID" property="modify_user" /></td>
</tr>
</logic:iterate>
</table>
</logic:notEmpty></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="checkboxes"></div>
</body>
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33537966
could you post a generated page (right click on the page and choose view source)

I think a td "embed" the table and the javascript currently create a checkbox by td (column)
0
 

Author Comment

by:Waponi
ID: 33541544
leakim971:
Thanks again,
Attached source in file   fecTradesHistMisc[1].txt
 
 

fecTradesHistMisc-1-.txt
TableSnap.bmp
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 200 total points
ID: 33544979
Ok replace #mytable by #unique_id

From the previous code we work on the main table and the cell 1 of row 1 (History) is similar than a colspan of all the column.
<script language="javascript">
	$(document).ready(function() {
		$("#unique_id thead tr th").each(function() {
			$("#checkboxes").append("<input name='checkboxes' class='hideColumn' type='checkbox' value='" + $(this).text() + "' />Hide " + $(this).text() + "<br />");
		});
		$(".hideColumn").click(function() {
			var columnNumber = $(this).index(".hideColumn") + 1;
			if($(this).is(":checked")) {
				$("th:nth-child(" + columnNumber + "),td:nth-child(" + columnNumber + ")", "#unique_id" ).hide();
			}
			else {
				$("th:nth-child(" + columnNumber + "),td:nth-child(" + columnNumber + ")", "#unique_id" ).show();
			}
		});
	});
</script>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33566968
Thanks for the points!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question