Develop Reference

Adjust Border Radius on button when div is collapsed/hidden/not active

I am using the Collapsible divs code from here: https://www.w3schools.com/howto/howto_js_collapsible.asp
And I had asked here how to make the divs visible by default & that was answered here: Make Collapsible Divs NOT hidden by default
But, now I have a problem with my CSS because, I have added border-radius to mine. So when it's open, it works fine - it has a rounded border around the whole .collapsible/.inside pair, but when it's closed I don't know how to have the rounded border on the .container button (because how I have the code makes the bottom of the collapsible not rounded) - how to I give "not active" CSS code, I guess?
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (!content.style.display || content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #007784;
color: white;
cursor: pointer;
width: 97%;
border:2px solid #000000;
border-bottom:0px;
border-radius:15px 15px 0px 0px;
text-align: center;
outline: none;
font-size: 16px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top:3px;
padding:2px;
}
.collapsible:hover {
background-color: #0066FF;
border-bottom:0px;
border-radius:15px 15px 0px 0px;
margin-top:3px;
}
.active {
background-color: #007784;
border-bottom:0px;
border-radius:15px 15px 0px 0px;
margin-top:3px;
}
.inside {
padding: 0;
width: 97%;
display: block;
overflow: hidden;
border-top:0px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #FFFFFF;
border-radius:0px 0px 15px 15px;
}
/*unrelated coding*/
table.trials {border:0; border-collapse:collapse; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; background-color:#000000; border-radius:15px; }
table.trials tr td {border: 1px solid #000000;}
table.trials tr td:first-child {border-left:0;}
table.trials tr td:last-child {border-right:0;}
table.trials tr:last-child td {border-bottom:0;}
.trials tr:last-child td:first-child {border-radius:0px 0px 0px 13px;}
.trials tr:last-child td:last-child {border-radius:0px 0px 13px 0px;}
td {background-color:#FFFFFF;}
td.NA {background-color:#CCCCCC;}
.divider td {height:3px; padding:0px; background-color:#000000;}
<button type="button" class="collapsible">CH — Conformation Champion <span style="font-size:14px; font-weight:normal; font-style:italic;">total: 15 pts / 3 Majors</span></button>
<div class="inside" style="padding:0;"><!------------CH - Conformation Champion------------------------------------------------------>
<table class="trials" cellspacing="0" cellpadding="2px" style="width:100%; margin:0; border-radius:0;">
<tr><!------DATE: Weekday — Month ##, YYYY------->
<td width="25%">Saturday – August 20, 2016</td>
<td width="25%">Sunday – September 11, 2016</td>
<td width="25%">Sunday – January 22, 2017</td>
<td width="25%">Sunday – May 7, 2017</td>
</tr>
<tr><!------HOST CLUB---------------------------------->
<td width="25%">Olympic Kennel Club</td>
<td width="25%">Eugene Kennel Club</td>
<td width="25%">Tualatin Kennel Club</td>
<td width="25%">Olympia Dog Fanciers Association</td>
</tr>
<tr><!------LOCATION: Venue — City, State-------->
<td width="25%">Enumclaw, WA</td>
<td width="25%">Brownsville, OR</td>
<td width="25%">Portland, OR</td>
<td width="25%">Elma, WA</td>
</tr>
<tr><!------JUDGE-------------------------------------->
<td width="25%">Judge: Adrian Woodfork</td>
<td width="25%">Judge: Nancy Simmons</td>
<td width="25%">Judge: John Ronald</td>
<td width="25%">Judge: Roger Pritchard</td>
</tr>
<tr class="award"><!------SCORE/PLACE/POINT------------>
<td width="25%"><i class="W">WB</i> — 1 pt</td>
<td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> / <i class="BOS">BOS</i> — 2 pts</td>
<td width="25%"><i class="W">WB</i> — 1 pt</td>
<td width="25%"><i class="W">WB</i> — 3 pt Major</td>
</tr>
<tr class="divider"><td colspan="4"></td></tr><!--------------------------------DIVIDER-------------------------------->
<tr><!------DATE: Weekday — Month ##, YYYY------->
<td width="25%">Monday – May 29, 2017</td>
<td width="25%">Sunday – June 25, 2017</td>
<td width="25%">Monday – July 10, 2017</td>
<td width="25%" class="NA"> </td>
</tr>
<tr><!------HOST CLUB---------------------------------->
<td width="25%">Kennel Club of the California Sierra</td>
<td width="25%">Clackamas Kennel Club</td>
<td width="25%">Puyallyp Valley Dog Fanciers</td>
<td width="25%" class="NA"> </td>
</tr>
<tr><!------LOCATION: Venue — City, State-------->
<td width="25%">Placerville, CA</td>
<td width="25%">Canby, OR</td>
<td width="25%">Puyallup, WA</td>
<td width="25%" class="NA"> </td>
</tr>
<tr><!------JUDGE-------------------------------------->
<td width="25%">Judge: Pat Hastings</td>
<td width="25%">Judge: Minna-Liisa Koltes</td>
<td width="25%">Judge: Sheila DiNardo</td>
<td width="25%" class="NA"> </td>
</tr>
<tr class="award"><!------SCORE/PLACE/POINT------------>
<td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> / <i class="BOS">BOS</i> — 3 pt Major</td>
<td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> — 1 pt</td>
<td width="25%"><i class="BOB">BOB</i> — 4 pt Major</td>
<td width="25%" class="NA"> </td>
</tr>
</table>
</div>

You can add a CSS rule
button.collapsible.active {
border-radius: 15px;
}
This says when the button has both the collapsible and the active classes the border radius should be 15px all around.
Additionally I would avoid directly manipulating content.style.display and make the display block or none also based on classes.

Syntax error from copy to clipboard command = unable to copy Text and template

Good day.
I've been trying top figure out why the copy to clipboard not working despite of putting the correct form name, please advise what would be the best command, i've been trying so hard couldn't seem to make it work.
here is the sample of the form or template im working on
I was hoping to use the copy to clipboard function so i can copy the title and content of each line
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
<script>
<script> }
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
}
</SCRIPT>
<head>
<body>
<!--Special comment-->
<!--Style-->
<style type="text/css">
/* Some Generic styles */
H1 {
Color: #9c33ff;
font-size: 20px;
isplay: inline-block;
}
H2 {
font-size: 15px;
Color: #751aff;
font-size: 13px;
}
Body {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 580px;
height: 800px;
border: none;
font: normal 12px/1 "Trebuchet MS", Helvetica, sans-serif;
color: rgba(2,2,2,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: -webkit-linear-gradient(-45deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: -moz-linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: Left;
}
input {
display: inline-block;
float: center;
}
TBODY {
font-size: 14px;
Color: #313133;
font-size: 13px;
}
#tickettemplate {
font-size: 15px;
Color: #313133;
font-size: 13px;
}
</style>
<!--Html starting point-->
<h1>i</h1>
<h2>i</h2>
<P align=center><IMG
src="" alt="" width="80" height="83"></P>
<FORM name=tickettemplate id=tickettemplate>
<!-- Table to contain page title and buttons -->
<TABLE>
<TBODY>
<TR>
<TD align=center colSpan=4>
<DIV></DIV></TD></TR>
<TR>
<TD><INPUT name=Reset onclick="resetForm();return false;" type=reset value="Clear All Fields">
</TD>
<TD><INPUT name=copyform onclick="val1();return false;" type=button value="Copy to Clipboard">
</TD></TR></TBODY></TABLE><!-- Table for General information --><BR>
<!--This is where i started-->
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>General Info</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Name:</TD>
<TD><INPUT name=cname_singleuser id=cname_singleuser size=50>
</TD>
<TR>
<TD vAlign=middle>User ID:</TD>
<TD><INPUT name=userid_singleuser0 id=userid_singleuser0 size=50> </TD></TR>
<TR>
<TD vAlign=top>Callback no.: </TD>
<TD><INPUT name="callback no" id=callbackno0 size=50></TD></TR>
<TR>
<TD vAlign=middle>Email Address:</TD>
<TD><INPUT name=emailaddy_singleuser id=emailaddy_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Office Location</TD>
<TD><INPUT name=oloc_singleuser id=oloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Current Location:</TD>
<TD><INPUT name=cloc_singleuser id=cloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Exisitng/Related:</TD>
<TD><INPUT name=exrelated_singleuser id=exrelated_singleuser
size=50></TD></TR>
<TD vAlign=top>Business Unit/Client:</TD>
<TD><INPUT name=client1 id=client1 size=50> </TD></TR></TBODY></TABLE><BR>
<TABLE width=750 cellSpacing=0 cellPadding=0>
<TBODY>
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>Brief Description</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Issue: </TD>
<TD><INPUT name=Issue id=issue0 size=50></TD></TR>
<TR>
<TD vAlign=top>Number of Users Affected: </TD>
<TD><INPUT name="Number of users Affected" id=numberofusers0
size=50></TD></TR>
<TR>
<TD vAlign=top>Business Impact:</TD>
<TD><SELECT name="Business Impact" id=businessimpact0 size=1 type="text">
<OPTION value="" selected></OPTION> <OPTION value=Minor>P4
Minor</OPTION> <OPTION value=Medium>P3 Medium</OPTION> <OPTION
value=High>P2 High</OPTION> <OPTION value=Major>P1
Major</OPTION></SELECT> </TD></TR>
<TR>
<TD width=400 vAlign=top><p>Additional information/
Incident Description:</p></TD>
<TD><TEXTAREA name=Description id=Description1 rows=8 cols=60 wrap=virtual></TEXTAREA></TD></TR></TBODY></TABLE>
<TABLE width=750>
<TBODY>
<TR><BR><STRONG>Choose the Category:</STRONG></TR></TBODY></TABLE>

Not sure where you got that code from, but seems to be wrong. If you are copying the text from an input it is pretty straight forward. Focus, select, and copy from a click action.
function copy(event) {
var selector = event.target.getAttribute('data-copy')
var elem = document.querySelector(selector)
elem.focus()
elem.select()
document.execCommand('copy')
}
document.querySelectorAll('[data-copy]').forEach( function () {
this.addEventListener('click', copy)
})
<textarea id="foo">Hello world</textarea>
<button type="button" id="btnCopy1" data-copy="#foo">copy</button>
<hr/>
<textarea id="bar">Hello world</textarea>
<button type="button" id="btnCopy2" data-copy="#bar">copy</button>

How to apply css to print div

I am currently working on a project which was already done now it requires some enhancement.I will give you a slight jist of it.It has a search functionality and after clicking that name displayed in the result it displays additional details.Now the client has asked to add the print option also,which will print the displayed .I have also implement this functionality.Now the main problem is that the print preview page does not take any css of the last page.I have used css int the HTML page only.Please see the code.I have referred Print the contents of a DIV question .But it uses css externally.How could I use it when I have defined it internally.
I know this might be a very basic question But I am very new to the CSS world.
Thanks in advance...`
Edit: I have applied the #print tag.But it was not taking the css even after that.Thats why I have voted to remain this question as unique
P.S. I didnt code this piece of shit, someone else did.
<script type="text/javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
'.td{'+
' width:205px;'+
'margin-top:10px;'+
'margin-bottom:10px;'+
'margin-left:10px;'+
'}'+
'table{'+
'border-collapse:collapse;'+
'border:1px solid #FF0000;'+
'}'+
'table td{'+
'border:1px solid #000;'+
'}'
'</style>';
w=window.open();
w.document.write(printContent);
w.print();
w.close();
}
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #FFFFFF;
color: #000000;
font: 85% "Open Sans", Tahoma, sans-serif;
}
.dataGrid {
border: 1px solid #48627A;
padding: 0;
width: 99%;
height: 100%;
background: #FFFFFF;
text-align: left;
}
.title {
color: #004e90;
font-weight: bold;
font-family: "Open Sans", Tahoma, sans-serif;
font-size: 12px;
}
.res td{
font-size: 12px;
font-family: open sans, arial;
border-top: 1px solid #ddd;
width: auto;
padding: 4px;
}
.dataGridTitle{
border: 1px solid #0D1115;
padding-top: 1px;
padding-right: 3px;
padding-bottom: 1px;
padding-left: 3px;
background: #48627A;
color: #FFFFFF;
text-align: center;
font: bold 0.8em verdana, arial, helvetica, sans-serif;
}
.dataGridElement{
padding-top: 1px;
padding-right: 3px;
padding-bottom:1px;
padding-left: 3px;
background: #E8EAEA;
color: #000000;
font: 0.8em verdana, arial, helvetica, sans-serif;
}
.td{
width:205px;
font: verdana, arial, helvetica, sans-serif;
}
<form>
<div id="print">
<div class="dataGrid" style="margin-top:10px;margin-bottom:10px;margin-left:10px;" >
<h1 style="margin-top:10px;margin-bottom:10px;margin-left:10px;" >Partner Details</h1>
<table class="res" style="table-layout:fixed; margin-top:10px;margin-bottom:10px;margin-left:10px;" >
<tr>
<td class = "td title" ><label for="username">Name</label>
</td>
<td ><label for="username">{$item.partnername}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Address</label>
</td>
<td><label for="surname">{$item.address}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Contact Number</label>
</td>
<td><label for="surname">{$item.cnumber}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Contact Person</label>
</td>
<td class = "td res" ><label for="surname">{$item.cperson}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Email</label>
</td>
<td class = "td res" ><label for="surname">{$item.email}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">School Center</label>
</td>
<td class = "td res" ><label for="surname">{$item.school_center}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Training Date</label>
</td>
<td class = "td res" ><label for="surname">{$item.t_date}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Certification Date</label>
</td>
<td class = "td res" ><label for="surname">{$item.c_date}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">No.Teachers</label>
</td>
<td class = "td res" ><label for="surname">{$item.no_teacher}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Teachers Certified</label>
</td>
<td class = "td res" ><label for="surname">{$item.cert_teacher}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label
</form>
</div>
</div>

at last I found an answer. I don't know the reason why #media was not working correctly. So I used css styling in the print function itself.
w.document.write('<style>h1{font-size:20px;color:#76C04E;width:90%;}</style>');
w.document.write('<style>body{background: #FFFFFF; color: #000000; font: 85% arial, verdana, helvetica, sans-serif; }</style>');
w.document.write('<style>.res td{font-size: 12px;font-family: open sans, arial; border-top: 1px solid #ddd; width: auto;padding: 4px;} </style>');
Now the css is correctly taken in the print preview page.
But it works only in firefox.Will update the answer accordingly when I find the solution for chrome
Thanks.

I forgot to mention that you need to link media query print tag in tag
<link rel="stylesheet" type="text/css" href="print.css" media="print">
I prefer to use external css file
Use media tag in css file:
All your print styles go here inside #media print{...}
#media print {
.header, .footer, .navigation{
display: none !important;
}
}
There are some rules, keep in mind that you don't need bunch of things while printing, menus, sidebars etc...

Iframe can't display HTML while a browser can

I am having hard time to make my Iframe display my html string which happens to be :
var='<BODY style="MARGIN: 0px" bgColor=#ffffff marginwidth="0" marginheight="0">
<SCRIPT language=JavaScript>
var Caller_User_Type = 'ESS';
var Locale_Date_Order = '2';
var User_Browser_Type = '';
var Page_ID = '266';
</SCRIPT>
<SCRIPT language=javascript>
var wlocationxx = '';
wlocationxx = String(window.location);
if (wlocationxx.substring(0,7) == 'http://'){
window.location = 'https://' + wlocationxx.substring(7)
}
</SCRIPT>
<SCRIPT language=JavaScript type=text/javascript src="../../../System/CONFIG/Common_Functions.js"></SCRIPT>
<SCRIPT language=JavaScript type=text/javascript src="../../../scripts/modeling_script.js"></SCRIPT>
<TABLE id=PageStart_1 border=0 cellSpacing=0 cellPadding=0 width="100%" height="100%">
<TBODY>
<TR>
<TD height="100%" vAlign=top>
<TABLE id=PageStart_2 border=0 cellSpacing=0 cellPadding=0 width="100%" height="100%" valign="top">
<TBODY>
<TR>
<TD height="1%" width="100%">
<SCRIPT language=javascript src="../../../System/EXB/EXB_Includes/logout.js"></SCRIPT>
<SCRIPT language=javaScript src="../../../System/EXB/EXB_Includes/EXB_cookie_factory.js"></SCRIPT>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#000063>
<TBODY>
<TR bgColor=#000066>
<TD bgColor=#000066 height=60 vAlign=center colSpan=2><IMG src="../../../System/EXB/EXB_Images/exb_login/mckinseyLogo.gif" width=212 height=23> </TD>
<TD bgColor=#000066 vAlign=center align=right><FONT color=white size=2 face="Arial Rounded MT Bold">myaccount.mckinsey.com</FONT> </TD></TR>
<TR>
<TD><IMG src="../../../System/EXB/EXB_Images/mck_racing_stripe.gif" width=309 height=3></TD>
<TD width="100%"><IMG src="../../../System/EXB/EXB_Images/mck_racing_stripe.gif" width="100%" height=3></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!-- begin exb_global.asp --><!-- end exb_global.asp -->
<SCRIPT type=text/javascript src="../../../System/EXB/EXB_Includes/Menu/HM_Config_Common.js"></SCRIPT>
<SCRIPT language=JavaScript type=text/javascript src="../../../System/EXB/EXB_Includes/Menu/HM_mnu_functions.js"></SCRIPT>
<SCRIPT language=JavaScript type=text/javascript src="../../../System/EXB/EXB_Includes/Menu/HM_dummy_functions.js"></SCRIPT>
<SCRIPT type=text/javascript>var sHMConfigContent = "SetUpdateDefaults('300375');HM_TopLevelMenuId=\"hmExbDCPart\";nMenuItems=0;sHM_f_SetItems=\"\";sHM_f_SetItems=\"\";sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Home\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Home.asp\",true,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Select Plan\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Part_Plan_Select.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Account Menu\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Home.asp\",false,\"hmExbDCPart_AccountMenu\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Withdrawals\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Distribution_Security.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Annual Decisions\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Rebalance_Elections_View.asp\",false,\"hmExbDCPart_AnnualDecisions\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Administration\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Personal_Profile.asp\",false,\"hmExbDCPart_Administration\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Contact Us\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Contact_us.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart\",\"Log Off\",\"\",\"65\",\"24\",\"\",\"\",\"javascript:User_Log_Off()\",false,\"\");if(sHM_f_SetItems!=\"\"){var sTopMenuY=\"HM_f_GetElementXY('hm_m_dc_part_placer','y')+\";sTopMenuY+=\"(HM_f_GetElementXY('horizontal_ruler','y')-\";sTopMenuY+=\"(HM_f_GetElementXY('hm_m_dc_part_placer','y')+HM_f_GetMenuDimension(HM_TopLevelMenuId, false)))\";HM_f_SetMenus({TopMenuX:\"HM_window_right_edge-HM_f_GetMenuDimension(HM_TopLevelMenuId,true)-10\",TopMenuY:sTopMenuY,TopKeepInWindowX:0,TopKeepInWindowY:0,IsPermanent:1,IsHorizontal:1,PositionChild:\"below\",MilliSecondsVisible:0,CreateOnLoad:true,MenuID:HM_TopLevelMenuId});eval(\"HM_f_SetItems(\"+sHM_f_SetItems+\");\");HM_f_SetMenuTemplate({SeparatorColor:\"white\",BorderColor:\"#000000\", BGColorOver:\"#FF9900\",BGColor:\"#DB5500\",BorderWidth:1,FontColor:((cssStyleObj!=null)?cssStyleObj.color:\"#ffffff\"),FontColorOver:((cssStyleObj!=null)?cssStyleObj.color:\"#ffffff\"),FontColorSelected:((cssStyleObj!=null)?cssStyleObj.color:\"#ffffff\"),MoreImagesVisible:true,ImageSrc:HM_imgsrc+\"/HM_More_white_right.gif\",HM_OnVisibilityToggle:HM_fc_HideControls});sHM_f_SetItems=\"\";sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Balances\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Balances.asp?f=byfund-true&f=byaccount-true&f=webchart-true\",true,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Account Summary\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Account_Summary.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Beneficiaries\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Beneficiary.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Contributions With Growth\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Cost_Basis.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Instant Statement\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Instant_Statement.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Loans\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Loan_Inquiry.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Pending Requests\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Pending_Request.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Plan Information and Forms\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Request_Documents.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Roth Conversion/Rollover\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_IPRC_Security.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AccountMenu\",\"Statement\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Individual_Statements.asp\",false,\"\");if(sHM_f_SetItems!=\"\"){HM_f_SetMenus({MenuID:\"hmExbDCPart_AccountMenu\"});eval(\"HM_f_SetItems(\"+ sHM_f_SetItems+\");\");}sHM_f_SetItems=\"\";sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AnnualDecisions\",\"Asset Allocation\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Rebalance_Elections_View.asp\",true,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AnnualDecisions\",\"Exchange Rates\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Exchange_Rate_Inquiry.asp\",false,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_AnnualDecisions\",\"Historical Performance\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Historical_Investment_Performance.asp\",false,\"\");if(sHM_f_SetItems!=\"\"){HM_f_SetMenus({MenuID:\"hmExbDCPart_AnnualDecisions\"});eval(\"HM_f_SetItems(\"+ sHM_f_SetItems+\");\");}sHM_f_SetItems=\"\";sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_Administration\",\"Personal Profile\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Personal_Profile.asp\",true,\"\");sHM_f_SetItems+=GetMenuItemString(\"hmExbDCPart_Administration\",\"Password Changes\",\"\",\"65\",\"24\",\"\",\"\",\"EXB_RSQ_Pin_Change.asp\",false,\"\");if(sHM_f_SetItems!=\"\"){HM_f_SetMenus({MenuID:\"hmExbDCPart_Administration\"});eval(\"HM_f_SetItems(\"+ sHM_f_SetItems+\");\");}}";if(window.event + "" == "undefined") event = null;function HM_f_PopUp(){return false};function HM_f_PopDown(){return false};HM_ConfigFiles="HM_Config_Menu.js";</SCRIPT>
<!--EXB_DC_Infobar.asp-->
<TABLE id=Table1 border=0 cellSpacing=0 cellPadding=0 width="100%"><!--begin infobar table-->
<TBODY>
<TR>
<TD bgColor=#db5500 width="100%"><IMG id=hm_m_dc_part_placer alt="" src="../../../System/EXB/EXB_Images/t.gif" width=1 height=21> </TD></TR>
<TR>
<TD colSpan=14><IMG id=horizontal_ruler src="../../../System/EXB/EXB_Images/horizontal_rule.gif" width="100%" height=3></TD></TR></TBODY></TABLE><!-- end of infobar -->
<SCRIPT language=JavaScript1.2 type=text/javascript src="../../../System/EXB/EXB_Includes/Menu/HM_Loader.js"></SCRIPT>
<SCRIPT type=text/javascript src="../../../../System/EXB/EXB_Includes/Menu/HM_ScriptDOM.js">
</SCRIPT>
<SCRIPT type=text/javascript src="../../../../System/EXB/EXB_Includes/Menu/HM_Config_Menu.js">
</SCRIPT>
</TD></TR>
<TR>
<TD height="100%" vAlign=top width="100%">
<TABLE id=PageStart_5 border=0 cellSpacing=0 cellPadding=0 height="100%" valign="top">
<TBODY>
<TR>
<TD height="100%" vAlign=top>
<TABLE id=PageStart_6 border=0 cellSpacing=0 cellPadding=0 width="100%" height="100%" valign="top">
<TBODY>
<TR>
<TD class=Body_Title9pt height="100%" vAlign=top><!-- begin exb_global.asp --><!-- end exb_global.asp -->
<SCRIPT language=javaScript type=text/javascript>
<!-- Begin
var contentEcomp = "";
var contentInfoLinx = "";
function winOpen(url)
{
if (url.substr(11, 5) == "ecomp")
{
contentEcomp = window.open(url,"contentEcomp","resizable=yes,toolbar=yes,location=yes,width=800," +
"height=500,directories=no,status=no,scroll=yes,scrollbars=yes,menubar=yes,left=200,top=100");
contentEcomp.focus();
}
if (url.substr(7, 5) == "infol")
alert('To log in, use the following (case sensitive) credentials - Username: Consulting2005, Password: clientinfolinx') ;
{
contentInfoLinx = window.open(url,"contentInfoLinx","resizable=yes,toolbar=yes,location=yes,width=800," +
"height=500,directories=no,status=no,scroll=yes,scrollbars=yes,menubar=yes,left=200,top=100");
contentInfoLinx.focus();
}
}
//-->
</SCRIPT>
<TABLE border=0 cellSpacing=0 cellPadding=3 width="100%" height="100%" valign="top">
<TBODY>
<TR>
<TD> </TD>
<TD rowSpan=20><IMG src="../../../system/exb/exb_images/vert_black_bar.gif" width=1 height="100%"> </TD></TR>
<TR>
<TD class=Body_Title8pt><B>Welcome</B><BR></TD></TR>
<TR>
<TD class=Body_Value9pt>Rahul Raina<BR><BR></TD></TR>
<TR>
<TD class=Body_Title8pt><B>Plan Sponsor:</B><BR></TD></TR>
<TR>
<TD class=Body_Value8pt>McKinsey & Company<BR></TD></TR>
<TR>
<TD class=Body_Title8pt><B>Plan Name:</B><BR></TD></TR>
<TR>
<TD class=Body_Value8pt>Retirement Program (Profit-Sharing Retirement Plan (PSRP) and Money Purchase Pension Plan (MPPP), where applicable)<BR><BR></TD></TR>
<TR>
<TD height="100%"></TD></TR></TBODY></TABLE><IMG border=0 src="images/clear_px.gif" width=160 height=1> </TD></TR></TBODY></TABLE></TD>
<TD class=Body_Title9pt height="100%"> </TD>
<TD height="100%" vAlign=top width="100%"><!-- begin exb_global.asp --><!-- end exb_global.asp -->
<FORM id=frmHome method=post name=frmHome><INPUT id=postAction type=hidden name=postAction> <BR>
<TABLE id=Table1 border=0 cellSpacing=0 cellPadding=0 width="100%" valign="top">
<TBODY>
<TR>
<TD class=Body_Value16pt>Home</TD></TR>
<TR>
<TD class=Body_Value9pt> </TD></TR><!-- 0011 S, 0013, 0014 --><!--<tr>
<td class="Body_Value9pt">Submit your annual Asset Allocation form between September 15 and October 6, 2008. </td>
</tr>
<tr>
<td class="Body_Value9pt"> </td>
</tr> --><!-- 0011 E --><!-- 0009 S --><!-- <tr>
<td class="Body_Value10pt">
<a href="EXB_RSQ_Rebalance_Elections_View.asp">
<font color="#db5500"><b>Click here to complete your Asset Allocation form</b></font></a>
</td>
</tr> --><!-- 0009 E--></TBODY></TABLE><BR><INPUT id=sMassAnouncementXML value='<?xml version="1.0"?><anouncement_text><rows>0</rows></anouncement_text>' type=hidden name=sMassAnouncementXML> <INPUT id=isMessageViewed value=True type=hidden name=isMessageViewed> <INPUT id=sSubGroup value=D218354ECFF824224F45F173EC46FFED type=hidden name=sSubGroup>
<TABLE id=Table3 border=1 rules=none cellSpacing=0 cellPadding=0 width="80%">
<TBODY>
<TR class=Table_Header>
<TD width=5></TD>
<TD><B>Special Message from McKinsey & Company</B></TD>
<TD width=10></TD></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Body_Value8pt>
<TD width=5></TD>
<TD><B>Do we have your current e-mail address?</B><BR>To confirm or update your e-mail address, go to Administration Menu>Personal Profile.
<P></P><B>The 2013 Annual Decisions Period is over.</B><BR>Your next opportunity to change your allocation will be in the fall of 2014.
<P></P></TD><!-- 0026: removed <b> tags -->
<TD width=10></TD></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Table_Header>
<TD width=5></TD>
<TD><B>Participant Information</B></TD>
<TD width=10></TD></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD>Rahul Raina</TD>
<TD></TD></TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD>Bangalore</TD>
<TD></TD></TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD>Karanataka,<SPACE> <SPACE><SPACE>560001</TD>
<TD></TD></TR>
<TR class=Body_Value8pt height=20 vAlign=bottom>
<TD></TD>
<TD>Email Address: <B>mail#raina7.com</B> </TD>
<TD></TD></TR>
<TR class=Body_Value8pt height=20 vAlign=bottom>
<TD></TD>
<TD>Plan Status: Term & Awaiting Payment</TD>
<TD></TD></TR>
<TR height=5></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Table_Header>
<TD width=5></TD>
<TD><B>Balance Information</B></TD>
<TD width=10></TD></TR>
<TR>
<TD height=8 colSpan=3></TD></TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD height=20 vAlign=top>Account balances are current as of October 31, 2013.</TD>
<TD></TD>
<TR>
<TR class=Body_Value8pt>
<TD></TD>
<TD>Value $98,390.82</TD>
<TD></TD></TR>
<TR height=5></TR>
<TR>
<TD height=8 colSpan=3></TD></TR></TBODY></TABLE><BR><BR>
<P><FONT size=2 face="verdana, helvetica, arial"><B>Click here for an Instant Web Statement</B></FONT></P><BR></FORM>
<SCRIPT language=Javascript>
//0023
function fn_getReport(siteURL)
{
document.frmHome.postAction.value = "report";
document.frmHome.submit();
}
function winOpen(siteURL)
{
window.open(siteURL, "","resizable=yes,toolbar=no,location=no,width=640," +
"height=480,directories=no,status=no,scroll=yes,scrollbars=yes,menubar=no,left=100,top=20");
}
//0005 -S
function OpenAnouncement(PlanID,GroupID,PartID)
{
var url = "../../../System/Exb/Exb_Includes/RSQ_Mass_Anouncement.asp?read=" +
document.getElementById("isMessageViewed").value +
"&groupid=" + GroupID +
"&subgroupid=" + document.getElementById("sSubGroup").value ;
if(document.getElementById("imgNew") != null)
{
document.getElementById("imgNew").style.display = "none";
}
var popupwindow = "";
popupwindow = window.open(url,"Mass_Announcement","resizable=yes,toolbar=no,location=no,width=500," +
"height=500,directories=no,status=no,scrollbars=yes,menubar=no,left=200,top=100");
popupwindow.focus();
}
//0005 -E
</SCRIPT>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD align=middle>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD class=StatusBar2 height=20 width="50%">Copyright 2003 Aon Consulting</TD>
<TD class=StatusBar2 height=20 width="50%" align=right>Security and Privacy Statement</TD></TR>
<TR>
<TD class=StatusBar1 height=20 colSpan=2 align=middle>Contact Us | Print Screen | Log Off</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!--
Start: 12/8/2013 10:46:06 AM
End : 12/8/2013 10:46:07 AM
Host : 192.168.11.106
-->
<DIV style="Z-INDEX: 5000; BORDER-BOTTOM: transparent 0px solid; POSITION: absolute; BORDER-LEFT: transparent 0px solid; WIDTH: 686px; HEIGHT: 22px; VISIBILITY: visible; OVERFLOW: hidden; BORDER-TOP: transparent 0px solid; TOP: 66px; CURSOR: default; BORDER-RIGHT: transparent 0px solid; LEFT: 292px" id=hmExbDCPart title="" sp="null">
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 47px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 0px" id=hmExbDCPart_I1 title="" hh="46">Home</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 83px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 47px" id=hmExbDCPart_I2 title="" hh="82">Select Plan</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 100px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 130px" id=hmExbDCPart_I3 title="" hh="99">Account Menu</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 93px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 230px" id=hmExbDCPart_I4 title="" hh="92">Withdrawals</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 121px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 323px" id=hmExbDCPart_I5 title="" hh="120">Annual Decisions</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 105px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 444px" id=hmExbDCPart_I6 title="" hh="104">Administration</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 80px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 1px solid; PADDING-TOP: 4px; LEFT: 549px" id=hmExbDCPart_I7 title="" hh="79">Contact Us</DIV>
<DIV style="POSITION: absolute; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #db5500; FONT-STYLE: normal; PADDING-LEFT: 4px; WIDTH: 57px; PADDING-RIGHT: 4px; FONT-FAMILY: Verdana, Verdana, Tahoma; HEIGHT: 22px; VISIBILITY: inherit; FONT-SIZE: 9pt; OVERFLOW: hidden; TOP: 0px; CURSOR: hand; FONT-WEIGHT: bold; PADDING-TOP: 4px; LEFT: 629px" id=hmExbDCPart_I8 title="" hh="57">Log Off</DIV></DIV></BODY>'
Please ignore the complex html page code. I just want to say that when I copy this in a notepad and save it as a .html page It renders the page properly which should have been.
But when I am trying to display this in an iframe using this it doesn't display anything:
var textBody = $(printstr);
var iframeBody = $('#test').contents().find('body');
iframeBody.append(textBody.html());
Here printstr is the string that contains the html string. Any help would be appreciated.

A good way to store large blobs of page content that you want to use from JavaScript (where by "good" I mean, at least, "much better than as a gigantic JavaScript string constant") is to use a <script> element with a non-executable "type" attribute:
<script id=frameContent type=text/content>
<BODY class=whatever>
<!-- ... -->
</BODY>
</script>
Then you can fetch the contents of the script by accessing the .innerHTML property of the DOM element. (That's why the example gives the element an "id" value — it makes it easy to find.)
Now, in your case, this approach will run into a problem because you're trying to include all those <script> elements inside the frame content. That could be worked around by using some alternative marker instead of the </script> closing tags:
<script id=frameContent type=text/content>
<BODY class=whatever>
<!-- ... -->
<script src=some/script.js><#script>
</BODY>
</script>
Then when you fetch the content you'd replace "#script" with "/script":
var frameContent = document.getElementById("frameContent")
.innerHTML
.replace(/#script/ig, "/" + "script");
A completely different approach would be to drop the idea of including your frame content like that, and simply host that page on your server and let the browser fetch it separately. It'd be much less messy, at the cost of an added HTTP transaction.

Adding/Removing classes on table data onclick

I would like to add a class for a table cell that matches the hover color onclick or on select of the cell.
I have this javascript (that doesnt work currently):
$('#tblContainer').click(function() {
var $this = $(this);
// Remove highlight
$this.closest("tr").find("td.guidelines").removeClass("guidelines");
// Add it to this one
$this.closest("td").addClass("guidelines2");
});
With these 3 main classes (guidelines, guidelines2- the class I want it to change to, and guidelines:hover):
table.rubrictable td.guidelines {
background: #FFF;
padding: 6px;
text-align:left;
color:#666666;
font-size:9pt;
font-style:plain;
border-right: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
border-bottom: 2px solid #666666;
width:150;
background: #FFF;
background: -moz-linear-gradient(left top , #E6E6E6, #FFF);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#E6E6E6), color-stop(100%,#FFF));
}
table.rubrictable td.guidelines2 {
background: #3C0;
padding: 6px;
text-align:left;
color:#666666;
font-size:9pt;
font-style:plain;
border-right: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
border-bottom: 2px solid #666666;
width:150;
}
table.rubrictable td.guidelines:hover {
background:#3C0;
}
And here is my html:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tblContainer" class="rubrictable">
<th class="dimensionstitle">ROWS (Dimensions)</th>
<th class="level">Delicious<br />
4</th>
<th class="level">Good<br />
3</th>
<th class="level">Needs Improvement<br /
2</th>
<th class="level">Poor <br />
1
</th>
<th class="dimensionstitle">COMMENTS</th>
</tr>
<tr>
<td class="dimensions" nowrap="nowrap">Number of Chips
</td>
<td class="guidelines">Chocolate chip in every bite</td>
<td class="guidelines">Chips in about 75% of bites</td>
<td class="guidelines">Chips in about 50% of bites</td>
<td class="guidelines"Too few or too many chips</td>
<td class="dimensions"><img src="Icons/edit-green.gif" width="16" height="16" /></td>
</tr>
<tr>
<td class="dimensions">Texture </td>
<td class="guidelines">Chew</td>
<td class="guidelines">Chewy in middle, crisp on edges</td>
<td class="guidelines">Texture either crispy/crunchy or 50% uncooked</td>
<td class="guidelines">Texture resembles a dog biscuit</td>
<td class="dimensions"><img src="Icons/edit-green.gif" width="16" height="16" /></td>
</tr>
</table>
And you can see an example here in my FIDDLE

You've put your click() handler on the table itself, so when you do $this.closest("tr"), it's looking for an element that is an ancestor (not a child) of the table and that is a tr. It won't find it.
Just change the click declaration to
$('#tblContainer td').click(function() {

As JacobM stated, you need to use the td on the cell.
$('#tblContainer td').click(function() {
However, your table has a class for all the options you would like to be selectable. That means you could use #tblContainer .guidelines instead.
$('#tblContainer .guidelines').click
I also believe this is what you are trying to achieve:
http://jsfiddle.net/sZenj/1/