I have a page with two dynamic tables.
When I want to print my page, each of my tables will be separated, one side in one page and other side in other pages. (both tables are dynamic)
I want to make static page break in any 672px
I did many way, but still I didn't get response.
Is there anyway for me?
My HTML:
<table id="selectedTable" style="width: 100%; font-size: 12pt; margin-top: 2px; text-align: right; border-top: 4px solid #000000; border-right: 4px solid #000000;border-left: 4px solid #000000;">
<tr>
<td colspan="{{(TotalDetailsOfUsagesCurrent.length * 2) + 2}}TotalDetailsOfUsagesCurrent">Blah blah</td>
</tr>
<tr>
<td width="53px">
<div style="text-align: center;">Usage</div>
</td>
<td ng-repeat='TDUC in TotalDetailsOfUsagesCurrent track by $index' colspan="2">
{{TDUC.UsageType}}
</td>
<td width="55px" style="border-bottom: 2px solid #000000; border-top: 2px solid #000000; font-size: 12pt;text-align: center; ">
<div>Total</div>
</td>
</tr>
<tr id="selectedRow" ng-click="heightChecker(this)" ng-repeat='DFC in DetailsOfFloorsCurrent'>
<td width=" 53px">
<div dir="ltr"> {{getFloorName(DFC.FloorNo)}} </div>
</td>
<td ng-repeat-start="usage in DFC.Usages track by $index">{{usage.UnitNo}}</td>
<td ng-repeat-end>{{usage.UnitArea}}</td>
<td width="55px">
{{DFC.TotalAreaCurrent.toFixed(2)}}
</td>
</tr>
<tr>
<td>
<div>Total</div>
</td>
<td ng-repeat-start="TDFC in TotalDetailsOfUsagesCurrent">{{TDFC.UnitNo}}</td>
<td ng-repeat-end>{{TDFC.UnitArea.toFixed(2)}}</td>
<td>{{TotalAreaCurrent.toFixed(2)}}</td>
</tr>
</table>
JS:
$scope.heightChecker = function (row) {
selectedRow[row.$index].offsetTop; //it gives me my row distance from top of table. for getting the pixles. but its usless
}
Related
I am working on responsive table and want to make row content bold if it matches the current date.
I am keeping first-child th & td hidden as i only need it for certain function
Based on value in <td data-label="TodaysDate">06-05-2020</td> and <td data-label="Date">05-05-2020</td>
if value if TodaysDate = Date then i need to make this row bold.
how can i do this using javascript
https://codepen.io/KGuide/pen/MWwMZzP
function compareCellValues() {
var rows = $(".ramadan-time").find("tbody tr"); //returns all table rows
rows.each(function() { //iterate over each row.
var thisRow = $(this), //this is the current row
TodaysDate = thisRow.find(".TodaysDate"), //this is the first value
sDate = thisRow.find(".Date"); //this is the second value
if (TodaysDate.text() !== sDate.text()) {
thisRow.css("font-weight", "bold");
}
thisRow.find(".TodaysDate").text(parseInt(TodaysDate.text()) - parseInt(sDate.text()));
});
}
window.onload = compareCellValues();
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
.ramadan-time > thead tr th:first-child{color:red; display:none;}
.ramadan-time > tbody tr td:first-child{color:red; display:none;}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
font-size: 12px;
}
table th {
font-size: .85em;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#media screen and (max-width: 380px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
<table class="ramadan-time">
<thead>
<tr>
<th scope="col">TodaysDate</th>
<th scope="col">Date</th>
<th scope="col">Day</th>
<th scope="col">Ramadan</th>
<th scope="col">April/May</th>
<th scope="col">Imsak</th>
<th scope="col">Fajr</th>
<th scope="col">Sunrise</th>
<th scope="col">Dhuhr</th>
<th scope="col">Asr</th>
<th scope="col">Maghrib</th>
<th scope="col">Isha</th>
</tr>
</thead>
<tbody>
<tr>
<td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
<td class="Date" data-label="Date">05-05-2020</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">1</td>
<td data-label="April/May">24</td>
<td data-label="Imsak">4:17</td>
<td data-label="Fajr">4:27</td>
<td data-label="Sunrise">5:45</td>
<td data-label="Dhuhr">12:20</td>
<td data-label="Asr">3:49</td>
<td data-label="Maghrib">6:49</td>
<td data-label="Isha">8:07</td>
</tr>
<tr>
<td class="TodaysDate" data-label="TodaysDate">6-05-2020</td>
<td class="Date" data-label="Date">06-05-2020</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">2</td>
<td data-label="April/May">25</td>
<td data-label="Imsak">4:16</td>
<td data-label="Fajr">4:26</td>
<td data-label="Sunrise">5:44</td>
<td data-label="Dhuhr">12:20</td>
<td data-label="Asr">3:50</td>
<td data-label="Maghrib">6:49</td>
<td data-label="Isha">8:08</td>
</tr>
<tr>
<td class="TodaysDate" data-label="TodaysDate">6-05-2020</td>
<td class="Date" data-label="Date">07-05-2020</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">3</td>
<td data-label="April/May">26</td>
<td data-label="Imsak">4:15</td>
<td data-label="Fajr">4:25</td>
<td data-label="Sunrise">5:43</td>
<td data-label="Dhuhr">12:19</td>
<td data-label="Asr">3:48</td>
<td data-label="Maghrib">6:50</td>
<td data-label="Isha">8:10</td>
</tr>
</tbody>
</table>
I am using following code to
function compareCellValues() {
var rows = $(".ramadan-time").find("tbody tr"); //returns all table rows
rows.each(function() { //iterate over each row.
var thisRow = $(this), //this is the current row
TodaysDate = thisRow.find(".TodaysDate"), //this is the first value
sDate = thisRow.find(".Date"); //this is the second value
if (TodaysDate.text() !== sDate.text()) {
thisRow.css("font-weight", "bold");
}
thisRow.find(".TodaysDate").text(parseInt(TodaysDate.text()) - parseInt(sDate.text()));
});
}
window.onload = compareCellValues();
It working for me i had put date in as 6-05-2020 & comparing it with 06-05-2020
after fixing the data script worked fine.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by KGuide</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<table class="ramadan-time">
<thead>
<tr>
<th scope="col">TodaysDate</th>
<th scope="col">Date</th>
<th scope="col">Day</th>
<th scope="col">Ramadan</th>
<th scope="col">April/May</th>
<th scope="col">Imsak</th>
<th scope="col">Fajr</th>
<th scope="col">Sunrise</th>
<th scope="col">Dhuhr</th>
<th scope="col">Asr</th>
<th scope="col">Maghrib</th>
<th scope="col">Isha</th>
</tr>
</thead>
<tbody>
<tr>
<td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
<td class="Date" data-label="Date">05-05-2020</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">1</td>
<td data-label="April/May">24</td>
<td data-label="Imsak">4:17</td>
<td data-label="Fajr">4:27</td>
<td data-label="Sunrise">5:45</td>
<td data-label="Dhuhr">12:20</td>
<td data-label="Asr">3:49</td>
<td data-label="Maghrib">6:49</td>
<td data-label="Isha">8:07</td>
</tr>
<tr>
<td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
<td class="Date" data-label="Date">06-05-2020</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">2</td>
<td data-label="April/May">25</td>
<td data-label="Imsak">4:16</td>
<td data-label="Fajr">4:26</td>
<td data-label="Sunrise">5:44</td>
<td data-label="Dhuhr">12:20</td>
<td data-label="Asr">3:50</td>
<td data-label="Maghrib">6:49</td>
<td data-label="Isha">8:08</td>
</tr>
<tr>
<td class="TodaysDate" data-label="TodaysDate">06-05-2020</td>
<td class="Date" data-label="Date">07-05-2020</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">3</td>
<td data-label="April/May">26</td>
<td data-label="Imsak">4:15</td>
<td data-label="Fajr">4:25</td>
<td data-label="Sunrise">5:43</td>
<td data-label="Dhuhr">12:19</td>
<td data-label="Asr">3:48</td>
<td data-label="Maghrib">6:50</td>
<td data-label="Isha">8:10</td>
</tr>
</tbody>
</table>
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.
I have two nested tables. One outer table and inside every row of outer table I have inner table. My problem is when I am filtering using searchBox it filters both the tables outer and inner. I don't want to filter my inner table rows. Look at my problem I don't want my inner table to be filtered.
var $rows = $('#top_table tr');
$('#txtsearch').keyup(function () {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
tr.top_tr td {
border-bottom: 1px solid black;
min-width: 16%;
}
th {
font: bold 11px"Helvetica Neue", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
width: 16%;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 0px;
color: #4f6b72;
width: 14%;
}
td:first-child {
border-left: 1px solid #C1DAD7;
}
table {
padding: 0px;
}
#top_table {
padding: 10px;
width: 800px;
}
body {
padding: 10px;
}
.subtable {
width: 100%;
}
.body-td {
border: none;
width: 16%;
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
display: inline;
width: 100%;
float: left;
}
tr.collapse>td {
display: table;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="txtsearch" />
<table id="top_table">
<thead>
<tr>
<th>List Name</th>
<th>No. Records</th>
<th>Avail. Records</th>
<th>Creation Date</th>
<th>Last Used</th>
<th>Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseOne">
<td>LIST NO. 1</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseOne" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseTwo">
<td>LIST NO. 2</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseTwo" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr">
<td>LIST NO. 3</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr>
<td colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Everyone i got an answer which is very much shocking i just focused on what i actually want and that was just to ignore even rows of table that contains inner tables.
And the answer to this is :var rows= $("tr:odd") and then i applied filteration on these rows .:) Thanks for you precious time.
inside td I am taking a table, but somehow table is not taking the td full height. can any one help me to fix this issue.
html for table:
<table style="height: auto">
<tr>
<td style="background-color: red">
<table style="background-color: orange">
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>
You can't force an object to take up 100% of the height of a cell without writing some JavaScript that will figure out the height of the cell and resize the table programatically.
I'm not really sure what your goal is with this, but you can achieve the look you seem to want by setting the background on the td and set a border to get the red outline.
<table style="height: auto">
<tr>
<td style="background-color: orange; border: solid red 1px">
<table>
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>
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/