Solved

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

Posted on 2010-08-24
8
392 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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

726 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