Solved

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

Posted on 2010-08-24
8
364 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
  • 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 28

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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now