Develop Reference

Prevent inner table from Filtering in Nested Html table

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.

Add transition to collapsible data table [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Here's what I have right now is https://codepen.io/andornagy/pen/gaGBZz
I want to add a collapse transition to the data table.
Please visit the link to see the whole example
Please Help!
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.labels tr td {
background-color: #2cc16a;
font-weight: bold;
color: #fff;
}
.label tr td label {
display: block;
}
[data-toggle="toggle"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Regian</th>
<th>Q1 2010</th>
<th>Q2 2010</th>
<th>Q3 2010</th>
<th>Q4 2010</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="accounting">Accounting</label>
<input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="management">Management</label>
<input type="checkbox" name="management" id="management" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Europe</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Middle East</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
</tbody>
</table>

Look at this example: using .slideToggle()
$(document).ready(function() {
$('thead').on('click', function () {
$(this).parent().next('div').slideToggle(500);
});
});
table {
width: 750px;
border-collapse: collapse;
}
thead {
width: 100%;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.labels tr td {
background-color: #2cc16a;
font-weight: bold;
color: #fff;
}
.label tr td label {
display: block;
}
[data-toggle="toggle"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr><th>Accounting</th></tr>
</thead>
</table>
<div>
<table>
<tbody>
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
</table>
</div>

So I was able to get the transition you wanted, but you'll have to restyle some elements. In order to manipulate the height of table elements you have to make them display block, which tends to mess up the style a bit. You should be able to get it back, just have to play with some widths and heights a little. But here is the updated codepen, I hope its what you were looking for! I wrote the JS vanilla, hope thats okay.
display: block;

Position sticky doesn't work on mozilla neither in safari

Position sticky doesn't work on mozilla neither in safari browser, but in chrome it's working perfectly. Is anyone there who can help me.. I know it we can make it don't by many others way which is "javaScript" but I don't wanna use javaScript in it.
table thead th { position: -webkit-sticky; position: sticky; top: -1px; background: #ccc;}
.table-div {max-height: 200px; overflow: auto;}
.table-div table td {min-width: 200px;}
<div class="container">
<div class="row nopadding">
<div class="table-div table-responsive">
<table class="table table-bordered">
<thead>
<th>head1</th>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</thead>
<tbody>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Position: sticky is not a standard, so it may works, depending of the browser and the version, or even you need to set some flags in web browser config.
You can check this availavility here:
http://caniuse.com/#feat=css-sticky
As you can see, in known issues:
Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers. (see also Firefox bug)

Since its only table elements which aren't responding properly to position: sticky and since it's only the th elements you want to apply to the sticky positioning to, why not build a custom thead and apply position: sticky to that custom thead?
Working Example:
.custom-thead {
position: -webkit-sticky;
position: sticky;
top: -1px;
min-width: 816px;
}
.custom-thead .custom-th {
display: inline-block;
position: relative;
left: 2px;
min-width: 202px;
margin-right: 2px;
background-color: #ccc;
}
.table-div {
max-height: 200px;
overflow: auto;
}
.table-div table td {
min-width: 200px;
height: 50px;
background-color: #eee;
}
.custom-th {
font-weight: bold;
}
.custom-th, td {
text-align: center;
}
<div class="container">
<div class="row nopadding">
<div class="table-div table-responsive">
<div class="custom-thead">
<div class="custom-th">head1</div><div class="custom-th">head1</div><div class="custom-th">head1</div><div class="custom-th">head1</div>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Hide/Show HTML tables [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have an HTML document which contains tables. Some tables are subtables of other ones. You can have an example here:
HTML :
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>A</td>
</tr>
</table>
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>B</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>C</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>D</td>
</tr>
</table>
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>E</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>F</td>
</tr>
</table>
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>G</td>
</tr>
</table>
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>H</td>
</tr>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>I</td>
</tr>
</table>
CSS :
table {
border-collapse: collapse;
border-width: 0px 0;
box-shadow: 3px 3px 4px #AAA;
}
.greyrow{
background-color: #c7c7c7;
font-size: 16px;
text-align: center;
color: black;
font-family: Verdana;
}
td{
width: 100px;
}
.top{
margin-bottom: 10px;
}
.sub1{
display: none;
margin-left: 20px;
margin-bottom: 10px;
}
.sub2{
display: none;
margin-left: 40px;
margin-bottom: 10px;
}
I would like to have only the toplevel tables displayed as default. This can be done with the css property "display: none".
I would like to show the subtables when the user clicks on the upper level table. Any existing jquery script for this ?

Here, I've created a jsfiddle with what you're asking for. You can create as many subtables as you could possibly want, this code will still work, and it's light on the fiddle.
HTML edit: I've surrounded the table you're cascading from, and the tables being cascaded from it in a div tag with the class ". clickable" <div class="clickable">...</div>
CSS edit: I've set all ".clickable" children with the same class (.clickable>.clickable{...}) to display:none;
JS edit: The code is activated when you click on the immediate child table element. It then gets that table's parent and finds its immediate child with the ".clickable" class and slideToggles it (you can set a different effect if you'd like, I assumed that this was the look you wanted)
HTML
<div class="clickable">
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>A</td>
</tr>
</table>
<div class="clickable">
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>B</td>
</tr>
</table>
<div class="clickable">
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>C</td>
</tr>
</table>
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>D</td>
</tr>
</table>
</div>
</div>
<div class="clickable">
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>E</td>
</tr>
</table>
<div class="clickable">
<table class='sub2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>F</td>
</tr>
</table>
</div>
</div>
</div>
<div class="clickable">
<table class='top'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>G</td>
</tr>
</table>
<div class="clickable">
<table class='sub1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>H</td>
</tr>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>I</td>
</tr>
</table>
</div>
</div>
CSS
table {
border-collapse: collapse;
border-width: 0px 0;
box-shadow: 3px 3px 4px #AAA;
}
.greyrow {
background-color: #c7c7c7;
font-size: 16px;
text-align: center;
color: black;
font-family:Verdana;
}
td {
width: 100px;
}
.top {
margin-bottom:10px;
}
.sub1 {
margin-left: 20px;
margin-bottom:10px;
}
.sub2 {
margin-left: 40px;
margin-bottom:10px;
}
.clickable {
cursor:pointer;
}
.clickable>.clickable {
display:none;
}
JS
$(".clickable").children("table").click(function () {
$(this).parent().children(".clickable").slideToggle();
});

I made a jsFiddle to do this. Is this what you are looking for?
HTML:
<table class='top' id='A'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>A</td>
</tr>
</table>
<table class='sub1 sub_A' id='A1'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>B</td>
</tr>
</table>
<table class='sub2 sub_A1'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>C</td>
</tr>
</table>
<table class='sub2 sub_A1'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>D</td></tr>
</table>
<table class='sub1 sub_A' id='A2'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>E</td>
</tr>
</table>
<table class='sub2 sub_A2'>
<tr class='greyrow'>
<td>SubLevel 2</td>
<td>F</td>
</tr>
</table>
<table class='top' id='G'>
<tr class='greyrow'>
<td>TopLevel</td>
<td>G</td>
</tr>
</table>
<table class='sub1 sub_G'>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>H</td>
</tr>
<tr class='greyrow'>
<td>SubLevel 1</td>
<td>I</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
border-width: 0px 0;
box-shadow: 3px 3px 4px #AAA;
}
.greyrow{
background-color: #c7c7c7;
font-size: 16px;
text-align: center;
color: black;
font-family: Verdana;
}
td{
width: 100px;
}
.top{
margin-bottom: 10px;
}
.sub1{
display: none;
margin-left: 20px;
margin-bottom: 10px;
width: 200px;
}
.sub2{
display: none;
margin-left: 40px;
margin-bottom: 10px;
width: 200px;
}
JQuery:
$(document).ready(function() {
var Clicks = [];
function click(id, numClicks) {
this.id = id;
this.numClicks = numClicks;
}
$(".top").click(function() {
var access = -1;
for (var c=0;c<Clicks.length;c++) {
if (Clicks[c].id === this.id) {
Clicks[c].numClicks += 1;
access = c;
c = Clicks.length;
}
}
if (access === -1) {
access = Clicks.length;
Clicks.push(new click(this.id, 1));
}
if (Clicks[access].numClicks % 2 !== 0) {
$((".sub_"+(this.id))).css('display', 'block');
} else {
$((".sub_"+(this.id)+'1')).css("display", "none");
$((".sub_"+(this.id))).css("display", "none");
}
});
$(".sub1").click(function() {
id = this.id;
var access = -1;
for (var c=0;c<Clicks.length;c++) {
if (Clicks[c].id === id) {
Clicks[c].numClicks += 1;
access = c;
c = Clicks.length;
}
}
if (access === -1) {
access = Clicks.length;
Clicks.push(new click(this.id, 1));
}
if (Clicks[access].numClicks % 2 !== 0) {
$((".sub_"+(id))).css('display', 'block');
} else {
$((".sub_"+(id))).css("display", "none");
}
});
});

Responsive Table not formatting after DIV Change/Load, until reszied

Example
Div Page
http://www.uller.com/dump/ajaxresponseissue/index.html
Source code, works fine if go direct
http://www.uller.com/dump/ajaxresponseissue/table.html
Displaying a table dynamically into a Div table has responsive script, however when the div is loaded the Script will not run until the window is rezised.
Trying to find a way to auto trigger the script on load of the div.
Below is code examples from that link.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Response Issuet</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div id="output"></div>
<script>
// Function called by Period select
$(document).ready(function () {
$("#output").load("table.html #loadMeOnly");$.getScript('responsibe-tables.js');$.getScript('jquery.js');
});
</script>
</body>
</html>
called table js
<div id="loadMeOnly">
<style type="text/css">
table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }
/* Mobile */
#media only screen and (max-width: 979px) {
table.responsive { margin-bottom: 0; }
.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
.pinned table { border-right: none; border-left: none; width: 100%; }
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
div.table-wrapper div.scrollable table { margin-left: 35%; }
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
}
</style>
<table width='100%' class="responsive">
<tr>
<th scope='col'> </th>
<th colspan='3' scope='col'><center>
Invited
</center></th>
<th colspan='2' scope='col'><center>
Accepted
</center></th>
<th colspan='2' scope='col'><center>
Confirmed
</center></th>
<th colspan='2' scope='col'><center>
Attended
</center></th>
<th scope='col'><center>
Sold
</center></th>
</tr>
<tr>
<th scope='col'>Name</th>
<th scope='col'>P</th>
<th scope='col'>G</th>
<th scope='col'>Total</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
<th scope='col'>%</th>
<th scope='col'>##</th>
</tr>
<tr>
<td> House</td>
<td onclick='document.location = "?Databuild&Account=28&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=28&Type=G";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=28";' style='cursor:pointer;'>1</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>ss ss</td>
<td onclick='document.location = "?Databuild&Account=68&Type=P";' style='cursor:pointer;'>9</td>
<td onclick='document.location = "?Databuild&Account=68&Type=G";' style='cursor:pointer;'>32</td>
<td onclick='document.location = "?Databuild&Account=68";' style='cursor:pointer;'>41</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>xx xx</td>
<td onclick='document.location = "?Databuild&Account=70&Type=P";' style='cursor:pointer;'></td>
<td onclick='document.location = "?Databuild&Account=70&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=70";' style='cursor:pointer;'>28</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>vv vv</td>
<td onclick='document.location = "?Databuild&Account=101&Type=P";' style='cursor:pointer;'>1</td>
<td onclick='document.location = "?Databuild&Account=101&Type=G";' style='cursor:pointer;'>28</td>
<td onclick='document.location = "?Databuild&Account=101";' style='cursor:pointer;'>29</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td>yy yy</td>
<td onclick='document.location = "?Databuild&Account=136&Type=P";' style='cursor:pointer;'>2</td>
<td onclick='document.location = "?Databuild&Account=136&Type=G";' style='cursor:pointer;'>19</td>
<td onclick='document.location = "?Databuild&Account=136";' style='cursor:pointer;'>21</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
<td>0%</td>
<td></td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td onclick='document.location = "?Databuild&Account=All&Type=P";' style='cursor:pointer;'>12</td>
<td onclick='document.location = "?Databuild&Account=All&Type=G";' style='cursor:pointer;'>108</td>
<td onclick='document.location = "?Databuild&Account=All";' style='cursor:pointer;'>120</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
<td>0%</td>
<td>0</td>
</tr>
</table>
</div>