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

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>
WaponiAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
 
Pravin AsarPrincipal Systems EngineerCommented:
<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
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
leakim971PluritechnicianCommented:

<!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
 
WaponiAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
WaponiAuthor Commented:
leakim971:
Thanks again,
Attached source in file   fecTradesHistMisc[1].txt
 
 

fecTradesHistMisc-1-.txt
TableSnap.bmp
0
 
leakim971PluritechnicianCommented:
Thanks for the points!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.