?
Solved

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

Posted on 2010-08-24
8
Medium Priority
?
397 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 800 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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Suggested Courses

801 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