jquery length between two selector - javascript

I want get length <td> between two selector .bg-primary and booked:first-child, what do i do?
I am trying as following code but it doesn't work: (i want result as:"num:5")
var term3 = document.getElementsByClassName( "booked" );
var vrtid = $( ".bg-primary" ).nextUntil( term3, "td" ).length;
alert('num:'+vrtid);
.booked {
color: rgb(255, 250, 81) !important;
background-color: #009975 !important;
}
.bg-primary {
color: #fff !important;
background-color: #337ab7 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td data-name="disabled-day">29</td>
<td data-name="disabled-day">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
<td data-name="disabled-day">04</td>
<td data-name="disabled-day" class="text-danger">05</td>
</tr>
<tr>
<td data-name="disabled-day">06</td>
<td data-name="disabled-day">07</td>
<td data-name="disabled-day">08</td>
<td data-name="disabled-day">09</td>
<td data-name="disabled-day">10</td>
<td data-name="disabled-day">11</td>
<td data-name="disabled-day" class="text-danger">12</td>
</tr>
<tr>
<td data-name="disabled-day">13</td>
<td data-name="disabled-day">14</td>
<td data-name="disabled-day">15</td>
<td data-name="disabled-day">16</td>
<td data-name="disabled-day">17</td>
<td data-name="disabled-day">18</td>
<td data-name="disabled-day" class="text-danger">19</td>
</tr>
<tr>
<td data-name="disabled-day">20</td>
<td data-name="disabled-day">21</td>
<td data-name="disabled-day">22</td>
<td data-name="disabled-day">23</td>
<td data-name="today" class="bg-primary">24</td>
<td data-name="day">25</td>
<td data-name="day" class="text-danger">26</td>
</tr>
<tr>
<td data-name="day">27</td>
<td data-name="day">28</td>
<td data-name="disabled-day" class="booked">29</td>
<td data-name="disabled-day" class="booked">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
</tr>
</tbody>
</table>


You could subtract indices:
var vrtid = $('.booked:first').index('td') - $('.bg-primary').index('td');
alert('num:'+vrtid);
.booked {
color: rgb(255, 250, 81) !important;
background-color: #009975 !important;
}
.bg-primary {
color: #fff !important;
background-color: #337ab7 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td data-name="disabled-day">29</td>
<td data-name="disabled-day">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
<td data-name="disabled-day">04</td>
<td data-name="disabled-day" class="text-danger">05</td>
</tr>
<tr>
<td data-name="disabled-day">06</td>
<td data-name="disabled-day">07</td>
<td data-name="disabled-day">08</td>
<td data-name="disabled-day">09</td>
<td data-name="disabled-day">10</td>
<td data-name="disabled-day">11</td>
<td data-name="disabled-day" class="text-danger">12</td>
</tr>
<tr>
<td data-name="disabled-day">13</td>
<td data-name="disabled-day">14</td>
<td data-name="disabled-day">15</td>
<td data-name="disabled-day">16</td>
<td data-name="disabled-day">17</td>
<td data-name="disabled-day">18</td>
<td data-name="disabled-day" class="text-danger">19</td>
</tr>
<tr>
<td data-name="disabled-day">20</td>
<td data-name="disabled-day">21</td>
<td data-name="disabled-day">22</td>
<td data-name="disabled-day">23</td>
<td data-name="today" class="bg-primary">24</td>
<td data-name="day">25</td>
<td data-name="day" class="text-danger">26</td>
</tr>
<tr>
<td data-name="day">27</td>
<td data-name="day">28</td>
<td data-name="disabled-day" class="booked">29</td>
<td data-name="disabled-day" class="booked">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
</tr>
</tbody>
</table>

Related

How to Hide a Collapsible table (except for top row) by default

I have the following html and would like to hide the collapsible table by default, only showing the top row. Which when clicked on, will pop out the rest of the table. Right now, it shows the whole table, only to hide once toggled.
<html>
<style>
table {
width: 300px;
border-collapse: collapse;
border-color: grey;
line-height: 1.7;
}
th {
background: #ffffff;
color: #000000;
font-weight: bold;
}
td, th {
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
}
td {
color: #000000;
}
.labels tr td {
font-weight: bold;
color: #feb330;
}
.label tr td label {
display: block;
}
.bold {
font-weight: bold;
}
[data-toggle="toggle"] {
display: none;
}
</style>
<table>
<tbody class="labels">
<tr bgcolor="#ffffff">
<td colspan="3">
<label for="14Season">2014 Season: 19</label>
<input type="checkbox" name="14Season" id="14Season" data-toggle="toggle">
</tr>
</tbody>
<tbody class="hide">
<tr bgcolor="#264033">
<td class="bold" colspan="1" style="color:#ffffff">Date</td>
<td class="bold" colspan="1" style="color:#ffffff">Scorigami</td>
<td class="bold" colspan="1" style="color:#ffffff">Total</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">0-6 L</td>
<td style="color:#ffffff">1</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">8-10 L</td>
<td style="color:#ffffff">2</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/22/13</td>
<td style="color:#ffffff">10-8 W</td>
<td style="color:#ffffff">3</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">3-2 W</td>
<td style="color:#ffffff">4</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">1-4 L</td>
<td style="color:#ffffff">5</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/26/13</td>
<td style="color:#ffffff">7-0 W</td>
<td style="color:#ffffff">6</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-2 W</td>
<td style="color:#ffffff">7</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-1 W</td>
<td style="color:#ffffff">8</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">13-6 W</td>
<td style="color:#ffffff">9</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">10-2 W</td>
<td style="color:#ffffff">10</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/13/14</td>
<td style="color:#ffffff">12-0 W</td>
<td style="color:#ffffff">11</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">8-2 W</td>
<td style="color:#ffffff">12</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">7-5 W</td>
<td style="color:#ffffff">13</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/27/14</td>
<td style="color:#ffffff">9-1 W</td>
<td style="color:#ffffff">14</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/2/14</td>
<td style="color:#ffffff">10-0 W</td>
<td style="color:#ffffff">15</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/3/14</td>
<td style="color:#ffffff">4-2 W</td>
<td style="color:#ffffff">16</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/4/14</td>
<td style="color:#ffffff">10-4 W</td>
<td style="color:#ffffff">17</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/16/14</td>
<td style="color:#ffffff">1-2 L</td>
<td style="color:#ffffff">18</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/17/14</td>
<td style="color:#ffffff">7-12 L</td>
<td style="color:#ffffff">19</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
</script>
</html>
I believe only a small change is required, but can't seem to get it right. Thanks for the help!

Adding
.hide {
display: none;
}
fixed the issue.

table {
display: none;
}
this should work. Also change,
[data-toggle="toggle"] {
display: block;
}

you can give to the table rows logical id's, then use a function to hide/show them
code to retrieve the table rows id's
var table = document.querySelector('table');
// listen for a click
table.addEventListener('click', function(ev){
// get the event targets ID
var serviceID = ev.target.id;
alert(serviceID);
})

How can I do the functions in order: 1. enlarge -> 2. rotate 360 degrees -> 3. resize to before enlargement -> 4. change color (toggle)

Here is a demo. How can I do the functions in order:
1. enlarge -> 2. rotate 360 degrees -> 3. resize to before enlargement -> 4. change color (toggle)
$(document).ready(function() {
$('.tlist td div').click(function() {
$(this).css("z-index", "1000").animate({
width: '+=90px',
height: '+=90px',
fontSize: '300%',
zIndex: 1000
}, {
step: function(now, fx) {
$(this).css('-webkit-transform', 'rotate(360deg)');
},
duration: 'slow'
}).animate({
width: '-=90px',
height: '-=90px',
fontSize: '120%',
zIndex: 1
}).toggleClass('changeColor').css("z-index", "1");
});
});
body {
width: 1340px;
text-align: center;
}
.tlist {
display: inline;
border-collapse: separate;
border-spacing: 2px 7px;
}
#rightT {
padding-left: 115px;
}
.tlist th {
font-size: 160%;
font-family: Sans-serif;
}
.tlist td {
width: 56px;
height: 54px;
border: 1px solid lightgrey;
}
.tlist td div {
position: absolute;
border: 1px solid lightgrey;
width: 45px;
color: white;
background-color: orange;
font-family: arial;
font-size: 120%;
text-align: center;
padding-top: 7px;
padding-bottom: 11px;
padding-left: 1px;
padding-right: 1px;
margin-top: -24px;
margin-left: 3px;
}
.tlist td div.changeColor {
color: black;
background-color: white;
border-color: red;
}
#left1,
#left2,
#left5,
#left6,
#left7,
#left8,
#left3,
#left4 {
text-align: right;
}
#right1,
#right2,
#right3,
#right4,
#right5,
#right6,
#right7,
#right8 {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id='leftT' class='tlist'>
<tr>
<th></th>
<th id='a1'>1</th>
<th id='a2'>2</th>
<th id='a3'>3</th>
<th id='a4'>4</th>
<th id='a5'>5</th>
<th id='a6'>6</th>
<th id='a7'>7</th>
<th id='a8'>8</th>
</tr>
<tr>
<th id='left1'>15/F</th>
<td id='f1501'>
<div>1501</div>
</td>
<td id='f1502'>
<div>1502</div>
</td>
<td id='f1503'>
<div>1503</div>
</td>
<td id='f1504'>
<div>1504</div>
</td>
<td id='f1505'>
<div>1505</div>
</td>
<td id='f1506'>
<div>1506</div>
</td>
<td id='f1507'>
<div>1507</div>
</td>
<td id='f1508'>
<div>1508</div>
</td>
<th id='right1'>15/F</th>
</tr>
<tr>
<th></th>
<td id='f1401'>
<div>1401</div>
</td>
<td id='f1402'>
<div>1402</div>
</td>
<td id='f1403'>
<div>1403</div>
</td>
<td id='f1404'>
<div>1404</div>
</td>
<td id='f1405'>
<div>1405</div>
</td>
<td id='f1406'>
<div>1406</div>
</td>
<td id='f1407'>
<div>1407</div>
</td>
<td id='f1408'>
<div>1408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1301'>
<div>1301</div>
</td>
<td id='f1302'>
<div>1302</div>
</td>
<td id='f1303'>
<div>1303</div>
</td>
<td id='f1304'>
<div>1304</div>
</td>
<td id='f1305'>
<div>1305</div>
</td>
<td id='f1306'>
<div>1306</div>
</td>
<td id='f1307'>
<div>1307</div>
</td>
<td id='f1308'>
<div>1308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1201'>
<div>1201</div>
</td>
<td id='f1202'>
<div>1202</div>
</td>
<td id='f1203'>
<div>1203</div>
</td>
<td id='f1204'>
<div>1204</div>
</td>
<td id='f1205'>
<div>1205</div>
</td>
<td id='f1206'>
<div>1206</div>
</td>
<td id='f1207'>
<div>1207</div>
</td>
<td id='f1208'>
<div>1208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1101'>
<div>1101</div>
</td>
<td id='f1102'>
<div>1102</div>
</td>
<td id='f1103'>
<div>1103</div>
</td>
<td id='f1104'>
<div>1104</div>
</td>
<td id='f1105'>
<div>1105</div>
</td>
<td id='f1106'>
<div>1106</div>
</td>
<td id='f1107'>
<div>1107</div>
</td>
<td id='f1108'>
<div>1108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left2'>10/F</th>
<td id='f1001'>
<div>1001</div>
</td>
<td id='f1002'>
<div>1002</div>
</td>
<td id='f1003'>
<div>1003</div>
</td>
<td id='f1004'>
<div>1004</div>
</td>
<td id='f1005'>
<div>1005</div>
</td>
<td id='f1006'>
<div>1006</div>
</td>
<td id='f1007'>
<div>1007</div>
</td>
<td id='f1008'>
<div>1008</div>
</td>
<th id='right2'>10/F</th>
</tr>
<tr>
<th></th>
<td id='f901'>
<div>901</div>
</td>
<td id='f902'>
<div>902</div>
</td>
<td id='f903'>
<div>903</div>
</td>
<td id='f904'>
<div>904</div>
</td>
<td id='f905'>
<div>905</div>
</td>
<td id='f906'>
<div>906</div>
</td>
<td id='f907'>
<div>907</div>
</td>
<td id='f908'>
<div>908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f801'>
<div>801</div>
</td>
<td id='f802'>
<div>802</div>
</td>
<td id='f803'>
<div>803</div>
</td>
<td id='f804'>
<div>804</div>
</td>
<td id='f805'>
<div>805</div>
</td>
<td id='f806'>
<div>806</div>
</td>
<td id='f807'>
<div>807</div>
</td>
<td id='f808'>
<div>808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f701'>
<div>701</div>
</td>
<td id='f702'>
<div>702</div>
</td>
<td id='f703'>
<div>703</div>
</td>
<td id='f704'>
<div>704</div>
</td>
<td id='f705'>
<div>705</div>
</td>
<td id='f706'>
<div>706</div>
</td>
<td id='f707'>
<div>707</div>
</td>
<td id='f708'>
<div>708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f601'>
<div>601</div>
</td>
<td id='f602'>
<div>602</div>
</td>
<td id='f603'>
<div>603</div>
</td>
<td id='f604'>
<div>604</div>
</td>
<td id='f605'>
<div>605</div>
</td>
<td id='f606'>
<div>606</div>
</td>
<td id='f607'>
<div>607</div>
</td>
<td id='f608'>
<div>608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left3'>5/F</th>
<td id='f501'>
<div>501</div>
</td>
<td id='f502'>
<div>502</div>
</td>
<td id='f503'>
<div>503</div>
</td>
<td id='f504'>
<div>504</div>
</td>
<td id='f505'>
<div>505</div>
</td>
<td id='f506'>
<div>506</div>
</td>
<td id='f507'>
<div>507</div>
</td>
<td id='f508'>
<div>508</div>
</td>
<th id='right3'>5/F</th>
</tr>
<tr>
<th></th>
<td id='f401'>
<div>401</div>
</td>
<td id='f402'>
<div>402</div>
</td>
<td id='f403'>
<div>403</div>
</td>
<td id='f404'>
<div>404</div>
</td>
<td id='f405'>
<div>405</div>
</td>
<td id='f406'>
<div>406</div>
</td>
<td id='f407'>
<div>407</div>
</td>
<td id='f408'>
<div>408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f301'>
<div>301</div>
</td>
<td id='f302'>
<div>302</div>
</td>
<td id='f303'>
<div>303</div>
</td>
<td id='f304'>
<div>304</div>
</td>
<td id='f305'>
<div>305</div>
</td>
<td id='f306'>
<div>306</div>
</td>
<td id='f307'>
<div>307</div>
</td>
<td id='f308'>
<div>308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f201'>
<div>201</div>
</td>
<td id='f202'>
<div>202</div>
</td>
<td id='f203'>
<div>203</div>
</td>
<td id='f204'>
<div>204</div>
</td>
<td id='f205'>
<div>205</div>
</td>
<td id='f206'>
<div>206</div>
</td>
<td id='f207'>
<div>207</div>
</td>
<td id='f208'>
<div>208</div>
</td>
<th></th>
</tr>
<tr>
<th id='left4'>1/F</th>
<td id='f101'>
<div>101</div>
</td>
<td id='f102'>
<div>102</div>
</td>
<td id='f103'>
<div>103</div>
</td>
<td id='f104'>
<div>104</div>
</td>
<td id='f105'>
<div>105</div>
</td>
<td id='f106'>
<div>106</div>
</td>
<td id='f107'>
<div>107</div>
</td>
<td id='f108'>
<div>108</div>
</td>
<th id='right4'>1/F</th>
</tr>
</table>
<!-- Table on Right -->
<table id='rightT' class='tlist'>
<tr>
<th></th>
<th id='b1'>1</th>
<th id='b2'>2</th>
<th id='b3'>3</th>
<th id='b4'>4</th>
<th id='b5'>5</th>
<th id='b6'>6</th>
<th id='b7'>7</th>
<th id='b8'>8</th>
</tr>
<tr>
<th id='left5'>30/F</th>
<td id='f3001'>
<div>3001</div>
</td>
<td id='f3002'>
<div>3002</div>
</td>
<td id='f3003'>
<div>3003</div>
</td>
<td id='f3004'>
<div>3004</div>
</td>
<td id='f3005'>
<div>3005</div>
</td>
<td id='f3006'>
<div>3006</div>
</td>
<td id='f3007'>
<div>3007</div>
</td>
<td id='f3008'>
<div>3008</div>
</td>
<th id='right5'>30/F</th>
</tr>
<tr>
<th></th>
<td id='f2901'>
<div>2901</div>
</td>
<td id='f2902'>
<div>2902</div>
</td>
<td id='f2903'>
<div>2903</div>
</td>
<td id='f2904'>
<div>2904</div>
</td>
<td id='f2905'>
<div>2905</div>
</td>
<td id='f2906'>
<div>2906</div>
</td>
<td id='f2907'>
<div>2907</div>
</td>
<td id='f2908'>
<div>2908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2801'>
<div>2801</div>
</td>
<td id='f2802'>
<div>2802</div>
</td>
<td id='f2803'>
<div>2803</div>
</td>
<td id='f2804'>
<div>2804</div>
</td>
<td id='f2805'>
<div>2805</div>
</td>
<td id='f2806'>
<div>2806</div>
</td>
<td id='f2807'>
<div>2807</div>
</td>
<td id='f2808'>
<div>2808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2701'>
<div>2701</div>
</td>
<td id='f2702'>
<div>2702</div>
</td>
<td id='f2703'>
<div>2703</div>
</td>
<td id='f2704'>
<div>2704</div>
</td>
<td id='f2705'>
<div>2705</div>
</td>
<td id='f2706'>
<div>2706</div>
</td>
<td id='f2707'>
<div>2707</div>
</td>
<td id='f2708'>
<div>2708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2601'>
<div>2601</div>
</td>
<td id='f2602'>
<div style='background-color:white;color:black;'>2602</div>
</td>
<td id='f2603'>
<div>2603</div>
</td>
<td id='f2604'>
<div>2604</div>
</td>
<td id='f2605'>
<div>2605</div>
</td>
<td id='f2606'>
<div>2606</div>
</td>
<td id='f2607'>
<div>2607</div>
</td>
<td id='f2608'>
<div>2608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left6'>25/F</th>
<td id='f2501'>
<div>2501</div>
</td>
<td id='f2502'>
<div>2502</div>
</td>
<td id='f2503'>
<div>2503</div>
</td>
<td id='f2504'>
<div>2504</div>
</td>
<td id='f2505'>
<div>2505</div>
</td>
<td id='f2506'>
<div>2506</div>
</td>
<td id='f2507'>
<div>2507</div>
</td>
<td id='f2508'>
<div>2508</div>
</td>
<th id='right6'>25/F</th>
</tr>
<tr>
<th></th>
<td id='f2401'>
<div>2401</div>
</td>
<td id='f2402'>
<div>2402</div>
</td>
<td id='f2403'>
<div>2403</div>
</td>
<td id='f2404'>
<div>2404</div>
</td>
<td id='f2405'>
<div>2405</div>
</td>
<td id='f2406'>
<div>2406</div>
</td>
<td id='f2407'>
<div>2407</div>
</td>
<td id='f2408'>
<div>2408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2301'>
<div>2301</div>
</td>
<td id='f2302'>
<div>2302</div>
</td>
<td id='f2303'>
<div>2303</div>
</td>
<td id='f2304'>
<div>2304</div>
</td>
<td id='f2305'>
<div>2305</div>
</td>
<td id='f2306'>
<div>2306</div>
</td>
<td id='f2307'>
<div>2307</div>
</td>
<td id='f2308'>
<div>2308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2201'>
<div>2201</div>
</td>
<td id='f2202'>
<div>2202</div>
</td>
<td id='f2203'>
<div>2203</div>
</td>
<td id='f2204'>
<div>2204</div>
</td>
<td id='f2205'>
<div>2205</div>
</td>
<td id='f2206'>
<div>2206</div>
</td>
<td id='f2207'>
<div>2207</div>
</td>
<td id='f2208'>
<div>2208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2101'>
<div>2101</div>
</td>
<td id='f2102'>
<div>2102</div>
</td>
<td id='f2103'>
<div>2103</div>
</td>
<td id='f2104'>
<div>2104</div>
</td>
<td id='f2105'>
<div>2105</div>
</td>
<td id='f2106'>
<div>2106</div>
</td>
<td id='f2107'>
<div>2107</div>
</td>
<td id='f2108'>
<div>2108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left7'>20/F</th>
<td id='f2001'>
<div>2001</div>
</td>
<td id='f2002'>
<div>2002</div>
</td>
<td id='f2003'>
<div>2003</div>
</td>
<td id='f2004'>
<div>2004</div>
</td>
<td id='f2005'>
<div>2005</div>
</td>
<td id='f2006'>
<div>2006</div>
</td>
<td id='f2007'>
<div>2007</div>
</td>
<td id='f2008'>
<div>2008</div>
</td>
<th id='right7'>20/F</th>
</tr>
<tr>
<th></th>
<td id='f1901'>
<div>1901</div>
</td>
<td id='f1902'>
<div>1902</div>
</td>
<td id='f1903'>
<div>1903</div>
</td>
<td id='f1904'>
<div>1904</div>
</td>
<td id='f1905'>
<div>1905</div>
</td>
<td id='f1906'>
<div>1906</div>
</td>
<td id='f1907'>
<div>1907</div>
</td>
<td id='f1908'>
<div>1908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1801'>
<div>1801</div>
</td>
<td id='f1802'>
<div>1802</div>
</td>
<td id='f1803'>
<div style='background-color:white;color:black;'>1803</div>
</td>
<td id='f1804'>
<div>1804</div>
</td>
<td id='f1805'>
<div>1805</div>
</td>
<td id='f1806'>
<div>1806</div>
</td>
<td id='f1807'>
<div>1807</div>
</td>
<td id='f1808'>
<div>1808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1701'>
<div>1701</div>
</td>
<td id='f1702'>
<div>1702</div>
</td>
<td id='f1703'>
<div>1703</div>
</td>
<td id='f1704'>
<div>1704</div>
</td>
<td id='f1705'>
<div>1705</div>
</td>
<td id='f1706'>
<div>1706</div>
</td>
<td id='f1707'>
<div>1707</div>
</td>
<td id='f1708'>
<div>1708</div>
</td>
<th></th>
</tr>
<tr>
<th id='left8'>16/F</th>
<td id='f1601'>
<div>1601</div>
</td>
<td id='f1602'>
<div>1602</div>
</td>
<td id='f1603'>
<div>1603</div>
</td>
<td id='f1604'>
<div>1604</div>
</td>
<td id='f1605'>
<div>1605</div>
</td>
<td id='f1606'>
<div>1606</div>
</td>
<td id='f1607'>
<div>1607</div>
</td>
<td id='f1608'>
<div>1608</div>
</td>
<th id='right8'>16/F</th>
</tr>
</table>
jsfiddle

A Simple yet most efficient way of doing this is using css.
A Simple CSS Solution for you using your own fiddle.
Updated the Answer as per comment.
jsfiddle
$(document).ready(function() {
$('.tlist td div').click(function() {
var t = $(this)
t.removeClass('changeStyle');
setTimeout(function() {
t.addClass('changeStyle');
}, 10);
});
});
body {
width: 1340px;
text-align: center;
}
.tlist {
display: inline;
border-collapse: separate;
border-spacing: 2px 7px;
}
#rightT {
padding-left: 115px;
}
.tlist th {
font-size: 160%;
font-family: Sans-serif;
}
.tlist td {
width: 56px;
height: 54px;
border: 1px solid lightgrey;
}
.tlist td div {
position: absolute;
border: 1px solid lightgrey;
width: 45px;
color: white;
background-color: orange;
font-family: arial;
font-size: 120%;
text-align: center;
padding-top: 7px;
padding-bottom: 11px;
padding-left: 1px;
padding-right: 1px;
margin-top: -24px;
margin-left: 3px;
}
.tlist td div.changeColor {
color: black;
background-color: white;
border-color: red;
}
#left1,
#left2,
#left5,
#left6,
#left7,
#left8,
#left3,
#left4 {
text-align: right;
}
#right1,
#right2,
#right3,
#right4,
#right5,
#right6,
#right7,
#right8 {
text-align: left;
}
#keyframes styleIt {
0% {}
25% {
transform: scale(1.5) rotate(0deg)
}
70% {
transform: scale(1.5) rotate(360deg);
}
100% {
transform: scale(1);
color: black;
background-color: white;
border-color: red;
}
}
.changeStyle {
animation: styleIt 1s forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='leftT' class='tlist'>
<tr>
<th></th>
<th id='a1'>1</th>
<th id='a2'>2</th>
<th id='a3'>3</th>
<th id='a4'>4</th>
<th id='a5'>5</th>
<th id='a6'>6</th>
<th id='a7'>7</th>
<th id='a8'>8</th>
</tr>
<tr>
<th id='left1'>15/F</th>
<td id='f1501'>
<div>1501</div>
</td>
<td id='f1502'>
<div>1502</div>
</td>
<td id='f1503'>
<div>1503</div>
</td>
<td id='f1504'>
<div>1504</div>
</td>
<td id='f1505'>
<div>1505</div>
</td>
<td id='f1506'>
<div>1506</div>
</td>
<td id='f1507'>
<div>1507</div>
</td>
<td id='f1508'>
<div>1508</div>
</td>
<th id='right1'>15/F</th>
</tr>
<tr>
<th></th>
<td id='f1401'>
<div>1401</div>
</td>
<td id='f1402'>
<div>1402</div>
</td>
<td id='f1403'>
<div>1403</div>
</td>
<td id='f1404'>
<div>1404</div>
</td>
<td id='f1405'>
<div>1405</div>
</td>
<td id='f1406'>
<div>1406</div>
</td>
<td id='f1407'>
<div>1407</div>
</td>
<td id='f1408'>
<div>1408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1301'>
<div>1301</div>
</td>
<td id='f1302'>
<div>1302</div>
</td>
<td id='f1303'>
<div>1303</div>
</td>
<td id='f1304'>
<div>1304</div>
</td>
<td id='f1305'>
<div>1305</div>
</td>
<td id='f1306'>
<div>1306</div>
</td>
<td id='f1307'>
<div>1307</div>
</td>
<td id='f1308'>
<div>1308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1201'>
<div>1201</div>
</td>
<td id='f1202'>
<div>1202</div>
</td>
<td id='f1203'>
<div>1203</div>
</td>
<td id='f1204'>
<div>1204</div>
</td>
<td id='f1205'>
<div>1205</div>
</td>
<td id='f1206'>
<div>1206</div>
</td>
<td id='f1207'>
<div>1207</div>
</td>
<td id='f1208'>
<div>1208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1101'>
<div>1101</div>
</td>
<td id='f1102'>
<div>1102</div>
</td>
<td id='f1103'>
<div>1103</div>
</td>
<td id='f1104'>
<div>1104</div>
</td>
<td id='f1105'>
<div>1105</div>
</td>
<td id='f1106'>
<div>1106</div>
</td>
<td id='f1107'>
<div>1107</div>
</td>
<td id='f1108'>
<div>1108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left2'>10/F</th>
<td id='f1001'>
<div>1001</div>
</td>
<td id='f1002'>
<div>1002</div>
</td>
<td id='f1003'>
<div>1003</div>
</td>
<td id='f1004'>
<div>1004</div>
</td>
<td id='f1005'>
<div>1005</div>
</td>
<td id='f1006'>
<div>1006</div>
</td>
<td id='f1007'>
<div>1007</div>
</td>
<td id='f1008'>
<div>1008</div>
</td>
<th id='right2'>10/F</th>
</tr>
<tr>
<th></th>
<td id='f901'>
<div>901</div>
</td>
<td id='f902'>
<div>902</div>
</td>
<td id='f903'>
<div>903</div>
</td>
<td id='f904'>
<div>904</div>
</td>
<td id='f905'>
<div>905</div>
</td>
<td id='f906'>
<div>906</div>
</td>
<td id='f907'>
<div>907</div>
</td>
<td id='f908'>
<div>908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f801'>
<div>801</div>
</td>
<td id='f802'>
<div>802</div>
</td>
<td id='f803'>
<div>803</div>
</td>
<td id='f804'>
<div>804</div>
</td>
<td id='f805'>
<div>805</div>
</td>
<td id='f806'>
<div>806</div>
</td>
<td id='f807'>
<div>807</div>
</td>
<td id='f808'>
<div>808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f701'>
<div>701</div>
</td>
<td id='f702'>
<div>702</div>
</td>
<td id='f703'>
<div>703</div>
</td>
<td id='f704'>
<div>704</div>
</td>
<td id='f705'>
<div>705</div>
</td>
<td id='f706'>
<div>706</div>
</td>
<td id='f707'>
<div>707</div>
</td>
<td id='f708'>
<div>708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f601'>
<div>601</div>
</td>
<td id='f602'>
<div>602</div>
</td>
<td id='f603'>
<div>603</div>
</td>
<td id='f604'>
<div>604</div>
</td>
<td id='f605'>
<div>605</div>
</td>
<td id='f606'>
<div>606</div>
</td>
<td id='f607'>
<div>607</div>
</td>
<td id='f608'>
<div>608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left3'>5/F</th>
<td id='f501'>
<div>501</div>
</td>
<td id='f502'>
<div>502</div>
</td>
<td id='f503'>
<div>503</div>
</td>
<td id='f504'>
<div>504</div>
</td>
<td id='f505'>
<div>505</div>
</td>
<td id='f506'>
<div>506</div>
</td>
<td id='f507'>
<div>507</div>
</td>
<td id='f508'>
<div>508</div>
</td>
<th id='right3'>5/F</th>
</tr>
<tr>
<th></th>
<td id='f401'>
<div>401</div>
</td>
<td id='f402'>
<div>402</div>
</td>
<td id='f403'>
<div>403</div>
</td>
<td id='f404'>
<div>404</div>
</td>
<td id='f405'>
<div>405</div>
</td>
<td id='f406'>
<div>406</div>
</td>
<td id='f407'>
<div>407</div>
</td>
<td id='f408'>
<div>408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f301'>
<div>301</div>
</td>
<td id='f302'>
<div>302</div>
</td>
<td id='f303'>
<div>303</div>
</td>
<td id='f304'>
<div>304</div>
</td>
<td id='f305'>
<div>305</div>
</td>
<td id='f306'>
<div>306</div>
</td>
<td id='f307'>
<div>307</div>
</td>
<td id='f308'>
<div>308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f201'>
<div>201</div>
</td>
<td id='f202'>
<div>202</div>
</td>
<td id='f203'>
<div>203</div>
</td>
<td id='f204'>
<div>204</div>
</td>
<td id='f205'>
<div>205</div>
</td>
<td id='f206'>
<div>206</div>
</td>
<td id='f207'>
<div>207</div>
</td>
<td id='f208'>
<div>208</div>
</td>
<th></th>
</tr>
<tr>
<th id='left4'>1/F</th>
<td id='f101'>
<div>101</div>
</td>
<td id='f102'>
<div>102</div>
</td>
<td id='f103'>
<div>103</div>
</td>
<td id='f104'>
<div>104</div>
</td>
<td id='f105'>
<div>105</div>
</td>
<td id='f106'>
<div>106</div>
</td>
<td id='f107'>
<div>107</div>
</td>
<td id='f108'>
<div>108</div>
</td>
<th id='right4'>1/F</th>
</tr>
</table>
<!-- Table on Right -->
<table id='rightT' class='tlist'>
<tr>
<th></th>
<th id='b1'>1</th>
<th id='b2'>2</th>
<th id='b3'>3</th>
<th id='b4'>4</th>
<th id='b5'>5</th>
<th id='b6'>6</th>
<th id='b7'>7</th>
<th id='b8'>8</th>
</tr>
<tr>
<th id='left5'>30/F</th>
<td id='f3001'>
<div>3001</div>
</td>
<td id='f3002'>
<div>3002</div>
</td>
<td id='f3003'>
<div>3003</div>
</td>
<td id='f3004'>
<div>3004</div>
</td>
<td id='f3005'>
<div>3005</div>
</td>
<td id='f3006'>
<div>3006</div>
</td>
<td id='f3007'>
<div>3007</div>
</td>
<td id='f3008'>
<div>3008</div>
</td>
<th id='right5'>30/F</th>
</tr>
<tr>
<th></th>
<td id='f2901'>
<div>2901</div>
</td>
<td id='f2902'>
<div>2902</div>
</td>
<td id='f2903'>
<div>2903</div>
</td>
<td id='f2904'>
<div>2904</div>
</td>
<td id='f2905'>
<div>2905</div>
</td>
<td id='f2906'>
<div>2906</div>
</td>
<td id='f2907'>
<div>2907</div>
</td>
<td id='f2908'>
<div>2908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2801'>
<div>2801</div>
</td>
<td id='f2802'>
<div>2802</div>
</td>
<td id='f2803'>
<div>2803</div>
</td>
<td id='f2804'>
<div>2804</div>
</td>
<td id='f2805'>
<div>2805</div>
</td>
<td id='f2806'>
<div>2806</div>
</td>
<td id='f2807'>
<div>2807</div>
</td>
<td id='f2808'>
<div>2808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2701'>
<div>2701</div>
</td>
<td id='f2702'>
<div>2702</div>
</td>
<td id='f2703'>
<div>2703</div>
</td>
<td id='f2704'>
<div>2704</div>
</td>
<td id='f2705'>
<div>2705</div>
</td>
<td id='f2706'>
<div>2706</div>
</td>
<td id='f2707'>
<div>2707</div>
</td>
<td id='f2708'>
<div>2708</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2601'>
<div>2601</div>
</td>
<td id='f2602'>
<div style='background-color:white;color:black;'>2602</div>
</td>
<td id='f2603'>
<div>2603</div>
</td>
<td id='f2604'>
<div>2604</div>
</td>
<td id='f2605'>
<div>2605</div>
</td>
<td id='f2606'>
<div>2606</div>
</td>
<td id='f2607'>
<div>2607</div>
</td>
<td id='f2608'>
<div>2608</div>
</td>
<th></th>
</tr>
<tr>
<th id='left6'>25/F</th>
<td id='f2501'>
<div>2501</div>
</td>
<td id='f2502'>
<div>2502</div>
</td>
<td id='f2503'>
<div>2503</div>
</td>
<td id='f2504'>
<div>2504</div>
</td>
<td id='f2505'>
<div>2505</div>
</td>
<td id='f2506'>
<div>2506</div>
</td>
<td id='f2507'>
<div>2507</div>
</td>
<td id='f2508'>
<div>2508</div>
</td>
<th id='right6'>25/F</th>
</tr>
<tr>
<th></th>
<td id='f2401'>
<div>2401</div>
</td>
<td id='f2402'>
<div>2402</div>
</td>
<td id='f2403'>
<div>2403</div>
</td>
<td id='f2404'>
<div>2404</div>
</td>
<td id='f2405'>
<div>2405</div>
</td>
<td id='f2406'>
<div>2406</div>
</td>
<td id='f2407'>
<div>2407</div>
</td>
<td id='f2408'>
<div>2408</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2301'>
<div>2301</div>
</td>
<td id='f2302'>
<div>2302</div>
</td>
<td id='f2303'>
<div>2303</div>
</td>
<td id='f2304'>
<div>2304</div>
</td>
<td id='f2305'>
<div>2305</div>
</td>
<td id='f2306'>
<div>2306</div>
</td>
<td id='f2307'>
<div>2307</div>
</td>
<td id='f2308'>
<div>2308</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2201'>
<div>2201</div>
</td>
<td id='f2202'>
<div>2202</div>
</td>
<td id='f2203'>
<div>2203</div>
</td>
<td id='f2204'>
<div>2204</div>
</td>
<td id='f2205'>
<div>2205</div>
</td>
<td id='f2206'>
<div>2206</div>
</td>
<td id='f2207'>
<div>2207</div>
</td>
<td id='f2208'>
<div>2208</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f2101'>
<div>2101</div>
</td>
<td id='f2102'>
<div>2102</div>
</td>
<td id='f2103'>
<div>2103</div>
</td>
<td id='f2104'>
<div>2104</div>
</td>
<td id='f2105'>
<div>2105</div>
</td>
<td id='f2106'>
<div>2106</div>
</td>
<td id='f2107'>
<div>2107</div>
</td>
<td id='f2108'>
<div>2108</div>
</td>
<th></th>
</tr>
<tr>
<th id='left7'>20/F</th>
<td id='f2001'>
<div>2001</div>
</td>
<td id='f2002'>
<div>2002</div>
</td>
<td id='f2003'>
<div>2003</div>
</td>
<td id='f2004'>
<div>2004</div>
</td>
<td id='f2005'>
<div>2005</div>
</td>
<td id='f2006'>
<div>2006</div>
</td>
<td id='f2007'>
<div>2007</div>
</td>
<td id='f2008'>
<div>2008</div>
</td>
<th id='right7'>20/F</th>
</tr>
<tr>
<th></th>
<td id='f1901'>
<div>1901</div>
</td>
<td id='f1902'>
<div>1902</div>
</td>
<td id='f1903'>
<div>1903</div>
</td>
<td id='f1904'>
<div>1904</div>
</td>
<td id='f1905'>
<div>1905</div>
</td>
<td id='f1906'>
<div>1906</div>
</td>
<td id='f1907'>
<div>1907</div>
</td>
<td id='f1908'>
<div>1908</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1801'>
<div>1801</div>
</td>
<td id='f1802'>
<div>1802</div>
</td>
<td id='f1803'>
<div style='background-color:white;color:black;'>1803</div>
</td>
<td id='f1804'>
<div>1804</div>
</td>
<td id='f1805'>
<div>1805</div>
</td>
<td id='f1806'>
<div>1806</div>
</td>
<td id='f1807'>
<div>1807</div>
</td>
<td id='f1808'>
<div>1808</div>
</td>
<th></th>
</tr>
<tr>
<th></th>
<td id='f1701'>
<div>1701</div>
</td>
<td id='f1702'>
<div>1702</div>
</td>
<td id='f1703'>
<div>1703</div>
</td>
<td id='f1704'>
<div>1704</div>
</td>
<td id='f1705'>
<div>1705</div>
</td>
<td id='f1706'>
<div>1706</div>
</td>
<td id='f1707'>
<div>1707</div>
</td>
<td id='f1708'>
<div>1708</div>
</td>
<th></th>
</tr>
<tr>
<th id='left8'>16/F</th>
<td id='f1601'>
<div>1601</div>
</td>
<td id='f1602'>
<div>1602</div>
</td>
<td id='f1603'>
<div>1603</div>
</td>
<td id='f1604'>
<div>1604</div>
</td>
<td id='f1605'>
<div>1605</div>
</td>
<td id='f1606'>
<div>1606</div>
</td>
<td id='f1607'>
<div>1607</div>
</td>
<td id='f1608'>
<div>1608</div>
</td>
<th id='right8'>16/F</th>
</tr>
</table>
Hope this Helps you if you want jQuery solution please do ask, ty..

CSS When using overflow the gap still remains

I have created a HTML table and when I use overflow to make it sure it doesn't exceed a certain height the below div is placed in such a way that the text could still fit.
I need to the div to be placed directly below the scrolling table.
I am using overflow: hidden however I can still select the text, but I can't see it.
$('document').ready(function() {
var $table = $('#ingsNeededTable'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
$(window).resize(function() {
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i] + 1);
});
}).resize();
var loop = setInterval(function() {
$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
}, 1);
});
#ingsNeededTableHolder {
height: 45%;
}
#ingsNeededTitle, #ingsRecentTitle {
text-align: center;
}
#ingsNeededTable {
border-collapse: collapse;
width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
border-bottom: 1px solid black;
}
#ingsNeededTable thead {
display: block;
width: 100%;
}
#ingsNeededTable tbody {
display: block;
height: 40%;
overflow-y: hidden;
width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
width: 40%;
}
.ingsNeededTableNeeded {
width: 10%
}
#ingsNeededTable tr:nth-child(even) {
background-color: #eaf2f1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
<table id='ingsNeededTable'>
<thead>
<tr>
<th class='ingsNeededTableIng'>Ingredient</th>
<th class='ingsNeededTableNeeded'>Needed (Kg)</th>
<th class='ingsNeededTableProd'>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>This Should Be Below The Scrolling Table</h2>
</div>
The table is properly aligned on my page, but it isn't on the snippet for some reason.

Set max-height to #ingsNeededTableHolder
#ingsNeededTableHolder {
height: 45%;
max-height: 150px;
overflow: hidden;
}
$('document').ready(function() {
var $table = $('#ingsNeededTable'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
$(window).resize(function() {
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i] + 1);
});
}).resize();
var loop = setInterval(function() {
$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
}, 1);
});
#ingsNeededTableHolder {
height: 45%;
max-height: 150px;
overflow: hidden;
}
#ingsNeededTitle, #ingsRecentTitle {
text-align: center;
}
#ingsNeededTable {
border-collapse: collapse;
width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
border-bottom: 1px solid black;
}
#ingsNeededTable thead {
display: block;
width: 100%;
}
#ingsNeededTable tbody {
display: block;
height: 40%;
overflow-y: hidden;
width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
width: 40%;
}
.ingsNeededTableNeeded {
width: 10%
}
#ingsNeededTable tr:nth-child(even) {
background-color: #eaf2f1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
<table id='ingsNeededTable'>
<thead>
<tr>
<th class='ingsNeededTableIng'>Ingredient</th>
<th class='ingsNeededTableNeeded'>Needed (Kg)</th>
<th class='ingsNeededTableProd'>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>This Should Be Below The Scrolling Table</h2>
</div>

select color using onclick from a zoomed view

here is a color chart.i am willing to click on any one of them and using css scale property make it larger for better view.then click on it again to select the desired color.i had no idea about it.so i tried to make a code .but it is not working as i expeted.in fact it is not working at all.how can i do that?
HERE IS THE CODE:
<html>
<head>
<style>
#colorchart {
position: fixed;
width:250px;
height:250px;
padding:0px;
margin:0px;
left:0px;
top:350px;
}
</style>
</head>
<body>
<script>
var table = document.getElementById('colorchart');
table.addEventListener ('click', function (event) {
var target = event.target||event.srcElement;
if (target.tagName == 'TD') {
target.style.transform=scale(5, 5);
target.addEventListener ("click", function(event) {
var newTarget=event.target;
if (newTarget.tagName=='TD') {
alert(newTarget.bgColor);
}
}, false);
}
}, false);
</script>
<table id="colorchart" >
<tr>
<td bgColor="#FBEFEF"></td>
<td bgColor="#FBF2EF"></td>
<td bgColor="#FBF5EF"></td>
<td bgColor="#FBF8EF"></td>
<td bgColor="#FBFBEF"></td>
<td bgColor="#F8FBEF"></td>
<td bgColor="#F5FBEF"></td>
<td bgColor="#F2FBEF"></td>
<td bgColor="#EFFBEF"></td>
<td bgColor="#EFFBF2"></td>
<td bgColor="#EFFBF5"></td>
<td bgColor="#EFFBF8"></td>
<td bgColor="#EFFBFB"></td>
<td bgColor="#EFF8FB"></td>
<td bgColor="#EFF5FB"></td>
<td bgColor="#EFF2FB"></td>
<td bgColor="#EFEFFB"></td>
<td bgColor="#F2EFFB"></td>
<td bgColor="#F5EFFB"></td>
<td bgColor="#F8EFFB"></td>
<td bgColor="#FBEFFB"></td>
<td bgColor="#FBEFF8"></td>
<td bgColor="#FBEFF5"></td>
<td bgColor="#FBEFF2"></td>
<td bgColor="#FFFFFF"></td>
</tr>
<tr>
<td bgColor="#F8E0E0"></td>
<td bgColor="#F8E6E0"></td>
<td bgColor="#F8ECE0"></td>
<td bgColor="#F7F2E0"></td>
<td bgColor="#F7F8E0"></td>
<td bgColor="#F1F8E0"></td>
<td bgColor="#ECF8E0"></td>
<td bgColor="#E6F8E0"></td>
<td bgColor="#E0F8E0"></td>
<td bgColor="#E0F8E6"></td>
<td bgColor="#E0F8EC"></td>
<td bgColor="#E0F8F1"></td>
<td bgColor="#E0F8F7"></td>
<td bgColor="#E0F2F7"></td>
<td bgColor="#E0ECF8"></td>
<td bgColor="#E0E6F8"></td>
<td bgColor="#E0E0F8"></td>
<td bgColor="#E6E0F8"></td>
<td bgColor="#ECE0F8"></td>
<td bgColor="#F2E0F7"></td>
<td bgColor="#F8E0F7"></td>
<td bgColor="#F8E0F1"></td>
<td bgColor="#F8E0EC"></td>
<td bgColor="#F8E0E6"></td>
<td bgColor="#FAFAFA"></td>
</tr>
<tr>
<td bgColor="#F6CECE"></td>
<td bgColor="#F6D8CE"></td>
<td bgColor="#F6E3CE"></td>
<td bgColor="#F5ECCE"></td>
<td bgColor="#F5F6CE"></td>
<td bgColor="#ECF6CE"></td>
<td bgColor="#E3F6CE"></td>
<td bgColor="#D8F6CE"></td>
<td bgColor="#CEF6CE"></td>
<td bgColor="#CEF6D8"></td>
<td bgColor="#CEF6E3"></td>
<td bgColor="#CEF6EC"></td>
<td bgColor="#CEF6F5"></td>
<td bgColor="#CEECF5"></td>
<td bgColor="#CEE3F6"></td>
<td bgColor="#CED8F6"></td>
<td bgColor="#CECEF6"></td>
<td bgColor="#D8CEF6"></td>
<td bgColor="#E3CEF6"></td>
<td bgColor="#ECCEF5"></td>
<td bgColor="#F6CEF5"></td>
<td bgColor="#F6CEEC"></td>
<td bgColor="#F6CEE3"></td>
<td bgColor="#F6CED8"></td>
<td bgColor="#F2F2F2"></td>
</tr>
<tr>
<td bgColor="#F5A9A9"></td>
<td bgColor="#F5BCA9"></td>
<td bgColor="#F5D0A9"></td>
<td bgColor="#F3E2A9"></td>
<td bgColor="#F2F5A9"></td>
<td bgColor="#E1F5A9"></td>
<td bgColor="#D0F5A9"></td>
<td bgColor="#BCF5A9"></td>
<td bgColor="#A9F5A9"></td>
<td bgColor="#A9F5BC"></td>
<td bgColor="#A9F5D0"></td>
<td bgColor="#A9F5E1"></td>
<td bgColor="#A9F5F2"></td>
<td bgColor="#A9E2F3"></td>
<td bgColor="#A9D0F5"></td>
<td bgColor="#A9BCF5"></td>
<td bgColor="#A9A9F5"></td>
<td bgColor="#BCA9F5"></td>
<td bgColor="#D0A9F5"></td>
<td bgColor="#E2A9F3"></td>
<td bgColor="#F5A9F2"></td>
<td bgColor="#F5A9E1"></td>
<td bgColor="#F5A9D0"></td>
<td bgColor="#F5A9BC"></td>
<td bgColor="#E6E6E6"></td>
</tr>
<tr>
<td bgColor="#F78181"></td>
<td bgColor="#F79F81"></td>
<td bgColor="#F7BE81"></td>
<td bgColor="#F5DA81"></td>
<td bgColor="#F3F781"></td>
<td bgColor="#D8F781"></td>
<td bgColor="#BEF781"></td>
<td bgColor="#9FF781"></td>
<td bgColor="#81F781"></td>
<td bgColor="#81F79F"></td>
<td bgColor="#81F7BE"></td>
<td bgColor="#81F7D8"></td>
<td bgColor="#81F7F3"></td>
<td bgColor="#81DAF5"></td>
<td bgColor="#81BEF7"></td>
<td bgColor="#819FF7"></td>
<td bgColor="#8181F7"></td>
<td bgColor="#9F81F7"></td>
<td bgColor="#BE81F7"></td>
<td bgColor="#DA81F5"></td>
<td bgColor="#F781F3"></td>
<td bgColor="#F781D8"></td>
<td bgColor="#F781BE"></td>
<td bgColor="#F7819F"></td>
<td bgColor="#D8D8D8"></td>
</tr>
<tr>
<td bgColor="#FA5858"></td>
<td bgColor="#FA8258"></td>
<td bgColor="#FAAC58"></td>
<td bgColor="#F7D358"></td>
<td bgColor="#F4FA58"></td>
<td bgColor="#D0FA58"></td>
<td bgColor="#ACFA58"></td>
<td bgColor="#82FA58"></td>
<td bgColor="#58FA58"></td>
<td bgColor="#58FA82"></td>
<td bgColor="#58FAAC"></td>
<td bgColor="#58FAD0"></td>
<td bgColor="#58FAF4"></td>
<td bgColor="#58D3F7"></td>
<td bgColor="#58ACFA"></td>
<td bgColor="#5882FA"></td>
<td bgColor="#5858FA"></td>
<td bgColor="#8258FA"></td>
<td bgColor="#AC58FA"></td>
<td bgColor="#D358F7"></td>
<td bgColor="#FA58F4"></td>
<td bgColor="#FA58D0"></td>
<td bgColor="#FA58AC"></td>
<td bgColor="#FA5882"></td>
<td bgColor="#BDBDBD"></td>
</tr>
<tr>
<td bgColor="#FE2E2E"></td>
<td bgColor="#FE642E"></td>
<td bgColor="#FE9A2E"></td>
<td bgColor="#FACC2E"></td>
<td bgColor="#F7FE2E"></td>
<td bgColor="#C8FE2E"></td>
<td bgColor="#9AFE2E"></td>
<td bgColor="#64FE2E"></td>
<td bgColor="#2EFE2E"></td>
<td bgColor="#2EFE64"></td>
<td bgColor="#2EFE9A"></td>
<td bgColor="#2EFEC8"></td>
<td bgColor="#2EFEF7"></td>
<td bgColor="#2ECCFA"></td>
<td bgColor="#2E9AFE"></td>
<td bgColor="#2E64FE"></td>
<td bgColor="#2E2EFE"></td>
<td bgColor="#642EFE"></td>
<td bgColor="#9A2EFE"></td>
<td bgColor="#CC2EFA"></td>
<td bgColor="#FE2EF7"></td>
<td bgColor="#FE2EC8"></td>
<td bgColor="#FE2E9A"></td>
<td bgColor="#FE2E64"></td>
<td bgColor="#A4A4A4"></td>
</tr>
<tr>
<td bgColor="#FF0000"></td>
<td bgColor="#FF4000"></td>
<td bgColor="#FF8000"></td>
<td bgColor="#FFBF00"></td>
<td bgColor="#FFFF00"></td>
<td bgColor="#BFFF00"></td>
<td bgColor="#80FF00"></td>
<td bgColor="#40FF00"></td>
<td bgColor="#00FF00"></td>
<td bgColor="#00FF40"></td>
<td bgColor="#00FF80"></td>
<td bgColor="#00FFBF"></td>
<td bgColor="#00FFFF"></td>
<td bgColor="#00BFFF"></td>
<td bgColor="#0080FF"></td>
<td bgColor="#0040FF"></td>
<td bgColor="#0000FF"></td>
<td bgColor="#4000FF"></td>
<td bgColor="#8000FF"></td>
<td bgColor="#BF00FF"></td>
<td bgColor="#FF00FF"></td>
<td bgColor="#FF00BF"></td>
<td bgColor="#FF0080"></td>
<td bgColor="#FF0040"></td>
<td bgColor="#848484"></td>
</tr>
<tr>
<td bgColor="#DF0101"></td>
<td bgColor="#DF3A01"></td>
<td bgColor="#DF7401"></td>
<td bgColor="#DBA901"></td>
<td bgColor="#D7DF01"></td>
<td bgColor="#A5DF00"></td>
<td bgColor="#74DF00"></td>
<td bgColor="#3ADF00"></td>
<td bgColor="#01DF01"></td>
<td bgColor="#01DF3A"></td>
<td bgColor="#01DF74"></td>
<td bgColor="#01DFA5"></td>
<td bgColor="#01DFD7"></td>
<td bgColor="#01A9DB"></td>
<td bgColor="#0174DF"></td>
<td bgColor="#013ADF"></td>
<td bgColor="#0101DF"></td>
<td bgColor="#3A01DF"></td>
<td bgColor="#7401DF"></td>
<td bgColor="#A901DB"></td>
<td bgColor="#DF01D7"></td>
<td bgColor="#DF01A5"></td>
<td bgColor="#DF0174"></td>
<td bgColor="#DF013A"></td>
<td bgColor="#6E6E6E"></td>
</tr>
<tr>
<td bgColor="#B40404"></td>
<td bgColor="#B43104"></td>
<td bgColor="#B45F04"></td>
<td bgColor="#B18904"></td>
<td bgColor="#AEB404"></td>
<td bgColor="#86B404"></td>
<td bgColor="#5FB404"></td>
<td bgColor="#31B404"></td>
<td bgColor="#04B404"></td>
<td bgColor="#04B431"></td>
<td bgColor="#04B45F"></td>
<td bgColor="#04B486"></td>
<td bgColor="#04B4AE"></td>
<td bgColor="#0489B1"></td>
<td bgColor="#045FB4"></td>
<td bgColor="#0431B4"></td>
<td bgColor="#0404B4"></td>
<td bgColor="#3104B4"></td>
<td bgColor="#5F04B4"></td>
<td bgColor="#8904B1"></td>
<td bgColor="#B404AE"></td>
<td bgColor="#B40486"></td>
<td bgColor="#B4045F"></td>
<td bgColor="#B40431"></td>
<td bgColor="#585858"></td>
</tr>
<tr>
<td bgColor="#8A0808"></td>
<td bgColor="#8A2908"></td>
<td bgColor="#8A4B08"></td>
<td bgColor="#886A08"></td>
<td bgColor="#868A08"></td>
<td bgColor="#688A08"></td>
<td bgColor="#4B8A08"></td>
<td bgColor="#298A08"></td>
<td bgColor="#088A08"></td>
<td bgColor="#088A29"></td>
<td bgColor="#088A4B"></td>
<td bgColor="#088A68"></td>
<td bgColor="#088A85"></td>
<td bgColor="#086A87"></td>
<td bgColor="#084B8A"></td>
<td bgColor="#08298A"></td>
<td bgColor="#08088A"></td>
<td bgColor="#29088A"></td>
<td bgColor="#4B088A"></td>
<td bgColor="#6A0888"></td>
<td bgColor="#8A0886"></td>
<td bgColor="#8A0868"></td>
<td bgColor="#8A084B"></td>
<td bgColor="#8A0829"></td>
<td bgColor="#424242"></td>
</tr>
<tr>
<td bgColor="#610B0B"></td>
<td bgColor="#61210B"></td>
<td bgColor="#61380B"></td>
<td bgColor="#5F4C0B"></td>
<td bgColor="#5E610B"></td>
<td bgColor="#4B610B"></td>
<td bgColor="#38610B"></td>
<td bgColor="#21610B"></td>
<td bgColor="#0B610B"></td>
<td bgColor="#0B6121"></td>
<td bgColor="#0B6138"></td>
<td bgColor="#0B614B"></td>
<td bgColor="#0B615E"></td>
<td bgColor="#0B4C5F"></td>
<td bgColor="#0B3861"></td>
<td bgColor="#0B2161"></td>
<td bgColor="#0B0B61"></td>
<td bgColor="#210B61"></td>
<td bgColor="#380B61"></td>
<td bgColor="#4C0B5F"></td>
<td bgColor="#610B5E"></td>
<td bgColor="#610B4B"></td>
<td bgColor="#610B38"></td>
<td bgColor="#610B21"></td>
<td bgColor="#2E2E2E"></td>
</tr>
<tr>
<td bgColor="#3B0B0B"></td>
<td bgColor="#3B170B"></td>
<td bgColor="#3B240B"></td>
<td bgColor="#3A2F0B"></td>
<td bgColor="#393B0B"></td>
<td bgColor="#2E3B0B"></td>
<td bgColor="#243B0B"></td>
<td bgColor="#173B0B"></td>
<td bgColor="#0B3B0B"></td>
<td bgColor="#0B3B17"></td>
<td bgColor="#0B3B24"></td>
<td bgColor="#0B3B2E"></td>
<td bgColor="#0B3B39"></td>
<td bgColor="#0B2F3A"></td>
<td bgColor="#0B243B"></td>
<td bgColor="#0B173B"></td>
<td bgColor="#0B0B3B"></td>
<td bgColor="#170B3B"></td>
<td bgColor="#240B3B"></td>
<td bgColor="#2F0B3A"></td>
<td bgColor="#3B0B39"></td>
<td bgColor="#3B0B2E"></td>
<td bgColor="#3B0B24"></td>
<td bgColor="#3B0B17"></td>
<td bgColor="#1C1C1C"></td>
</tr>
<tr>
<td bgColor="#2A0A0A"></td>
<td bgColor="#2A120A"></td>
<td bgColor="#2A1B0A"></td>
<td bgColor="#29220A"></td>
<td bgColor="#292A0A"></td>
<td bgColor="#222A0A"></td>
<td bgColor="#1B2A0A"></td>
<td bgColor="#122A0A"></td>
<td bgColor="#0A2A0A"></td>
<td bgColor="#0A2A12"></td>
<td bgColor="#0A2A1B"></td>
<td bgColor="#0A2A22"></td>
<td bgColor="#0A2A29"></td>
<td bgColor="#0A2229"></td>
<td bgColor="#0A1B2A"></td>
<td bgColor="#0A122A"></td>
<td bgColor="#0A0A2A"></td>
<td bgColor="#120A2A"></td>
<td bgColor="#1B0A2A"></td>
<td bgColor="#220A29"></td>
<td bgColor="#2A0A29"></td>
<td bgColor="#2A0A22"></td>
<td bgColor="#2A0A1B"></td>
<td bgColor="#2A0A12"></td>
<td bgColor="#151515"></td>
</tr>
<tr>
<td bgColor="#190707"></td>
<td bgColor="#190B07"></td>
<td bgColor="#191007"></td>
<td bgColor="#181407"></td>
<td bgColor="#181907"></td>
<td bgColor="#141907"></td>
<td bgColor="#101907"></td>
<td bgColor="#0B1907"></td>
<td bgColor="#071907"></td>
<td bgColor="#07190B"></td>
<td bgColor="#071910"></td>
<td bgColor="#071914"></td>
<td bgColor="#071918"></td>
<td bgColor="#071418"></td>
<td bgColor="#071019"></td>
<td bgColor="#070B19"></td>
<td bgColor="#070719"></td>
<td bgColor="#0B0719"></td>
<td bgColor="#100719"></td>
<td bgColor="#140718"></td>
<td bgColor="#190718"></td>
<td bgColor="#190714"></td>
<td bgColor="#190710"></td>
<td bgColor="#19070B"></td>
<td bgColor="#000000"></td>
</tr>
</table>
</body>
</html>

First you need to halt your code until the DOM is ready.
Or else the code starts to add an event listener to something that is not there.
This you can do by adding a function that is called when the body is loaded.
I've done this to your code below.
Setting CSS3 properties from javascript isn't as easy as setting CSS properties.
Not all browsers support all features, so you need to check that it is supported first.
We need to check both for webkit and moz.
To check for the transformProperty you could do something like
function getCSS3TransformSupport(){
if (undefined!==document.documentElement.style.webkitTransform){
return "webkit";
}
else if (undefined!==document.documentElement.style.mozTransform){
return "moz";
}
else{
return false;
}
}
var supportsCSSTransform=getCSS3TransformSupport();
This will give you 'webkit' or 'moz' if the browser supports it. If it doesn't it returns false.
Now, if you want to change the CSS property, you have to consider if it's webkit or moz.
So the target.style.transform would be either target.style.webkitTransform or target.style.mozTransform.
For more info about styling CSS3 with javascript, and my source in this: http://www.javascriptkit.com/javatutors/setcss3properties.shtml
Here is the code:
<html>
<head>
<style>
#colorchart {
position: fixed;
width:250px;
height:250px;
padding:0px;
margin:0px;
left:0px;
top:350px;
}
</style>
</head>
<body onload="initialize();">
<script type="text/javascript">
function getCSS3TransformSupport(){
if (undefined!==document.documentElement.style.webkitTransform){
return "webkit";
}
else if (undefined!==document.documentElement.style.mozTransform){
return "moz";
}
else{
return false;
}
}
var supportsCSSTransform=getCSS3TransformSupport();
function initialize(){
var table = document.getElementById('colorchart');
table.addEventListener('click', function (event) {
var target = event.target||event.srcElement;
if (target.tagName == 'TD') {
var transformTo="scale(2,2)";
switch (supportsCSSTransform){
case 'moz':
target.style.mozTransform=transformTo;
break;
case 'webkit':
target.style.webkitTransform=transformTo;
break;
}
target.addEventListener ("click", function(event) {
var newTarget=event.target;
if (newTarget.tagName=='TD') {
alert(newTarget.bgColor);
}
}, false);
}
}, false);
}
</script>
<table id="colorchart" >
<tr>
<td bgColor="#FBEFEF"></td>
<td bgColor="#FBF2EF"></td>
<td bgColor="#FBF5EF"></td>
<td bgColor="#FBF8EF"></td>
<td bgColor="#FBFBEF"></td>
<td bgColor="#F8FBEF"></td>
<td bgColor="#F5FBEF"></td>
<td bgColor="#F2FBEF"></td>
<td bgColor="#EFFBEF"></td>
<td bgColor="#EFFBF2"></td>
<td bgColor="#EFFBF5"></td>
<td bgColor="#EFFBF8"></td>
<td bgColor="#EFFBFB"></td>
<td bgColor="#EFF8FB"></td>
<td bgColor="#EFF5FB"></td>
<td bgColor="#EFF2FB"></td>
<td bgColor="#EFEFFB"></td>
<td bgColor="#F2EFFB"></td>
<td bgColor="#F5EFFB"></td>
<td bgColor="#F8EFFB"></td>
<td bgColor="#FBEFFB"></td>
<td bgColor="#FBEFF8"></td>
<td bgColor="#FBEFF5"></td>
<td bgColor="#FBEFF2"></td>
<td bgColor="#FFFFFF"></td>
</tr>
<tr>
<td bgColor="#F8E0E0"></td>
<td bgColor="#F8E6E0"></td>
<td bgColor="#F8ECE0"></td>
<td bgColor="#F7F2E0"></td>
<td bgColor="#F7F8E0"></td>
<td bgColor="#F1F8E0"></td>
<td bgColor="#ECF8E0"></td>
<td bgColor="#E6F8E0"></td>
<td bgColor="#E0F8E0"></td>
<td bgColor="#E0F8E6"></td>
<td bgColor="#E0F8EC"></td>
<td bgColor="#E0F8F1"></td>
<td bgColor="#E0F8F7"></td>
<td bgColor="#E0F2F7"></td>
<td bgColor="#E0ECF8"></td>
<td bgColor="#E0E6F8"></td>
<td bgColor="#E0E0F8"></td>
<td bgColor="#E6E0F8"></td>
<td bgColor="#ECE0F8"></td>
<td bgColor="#F2E0F7"></td>
<td bgColor="#F8E0F7"></td>
<td bgColor="#F8E0F1"></td>
<td bgColor="#F8E0EC"></td>
<td bgColor="#F8E0E6"></td>
<td bgColor="#FAFAFA"></td>
</tr>
<tr>
<td bgColor="#F6CECE"></td>
<td bgColor="#F6D8CE"></td>
<td bgColor="#F6E3CE"></td>
<td bgColor="#F5ECCE"></td>
<td bgColor="#F5F6CE"></td>
<td bgColor="#ECF6CE"></td>
<td bgColor="#E3F6CE"></td>
<td bgColor="#D8F6CE"></td>
<td bgColor="#CEF6CE"></td>
<td bgColor="#CEF6D8"></td>
<td bgColor="#CEF6E3"></td>
<td bgColor="#CEF6EC"></td>
<td bgColor="#CEF6F5"></td>
<td bgColor="#CEECF5"></td>
<td bgColor="#CEE3F6"></td>
<td bgColor="#CED8F6"></td>
<td bgColor="#CECEF6"></td>
<td bgColor="#D8CEF6"></td>
<td bgColor="#E3CEF6"></td>
<td bgColor="#ECCEF5"></td>
<td bgColor="#F6CEF5"></td>
<td bgColor="#F6CEEC"></td>
<td bgColor="#F6CEE3"></td>
<td bgColor="#F6CED8"></td>
<td bgColor="#F2F2F2"></td>
</tr>
<tr>
<td bgColor="#F5A9A9"></td>
<td bgColor="#F5BCA9"></td>
<td bgColor="#F5D0A9"></td>
<td bgColor="#F3E2A9"></td>
<td bgColor="#F2F5A9"></td>
<td bgColor="#E1F5A9"></td>
<td bgColor="#D0F5A9"></td>
<td bgColor="#BCF5A9"></td>
<td bgColor="#A9F5A9"></td>
<td bgColor="#A9F5BC"></td>
<td bgColor="#A9F5D0"></td>
<td bgColor="#A9F5E1"></td>
<td bgColor="#A9F5F2"></td>
<td bgColor="#A9E2F3"></td>
<td bgColor="#A9D0F5"></td>
<td bgColor="#A9BCF5"></td>
<td bgColor="#A9A9F5"></td>
<td bgColor="#BCA9F5"></td>
<td bgColor="#D0A9F5"></td>
<td bgColor="#E2A9F3"></td>
<td bgColor="#F5A9F2"></td>
<td bgColor="#F5A9E1"></td>
<td bgColor="#F5A9D0"></td>
<td bgColor="#F5A9BC"></td>
<td bgColor="#E6E6E6"></td>
</tr>
<tr>
<td bgColor="#F78181"></td>
<td bgColor="#F79F81"></td>
<td bgColor="#F7BE81"></td>
<td bgColor="#F5DA81"></td>
<td bgColor="#F3F781"></td>
<td bgColor="#D8F781"></td>
<td bgColor="#BEF781"></td>
<td bgColor="#9FF781"></td>
<td bgColor="#81F781"></td>
<td bgColor="#81F79F"></td>
<td bgColor="#81F7BE"></td>
<td bgColor="#81F7D8"></td>
<td bgColor="#81F7F3"></td>
<td bgColor="#81DAF5"></td>
<td bgColor="#81BEF7"></td>
<td bgColor="#819FF7"></td>
<td bgColor="#8181F7"></td>
<td bgColor="#9F81F7"></td>
<td bgColor="#BE81F7"></td>
<td bgColor="#DA81F5"></td>
<td bgColor="#F781F3"></td>
<td bgColor="#F781D8"></td>
<td bgColor="#F781BE"></td>
<td bgColor="#F7819F"></td>
<td bgColor="#D8D8D8"></td>
</tr>
<tr>
<td bgColor="#FA5858"></td>
<td bgColor="#FA8258"></td>
<td bgColor="#FAAC58"></td>
<td bgColor="#F7D358"></td>
<td bgColor="#F4FA58"></td>
<td bgColor="#D0FA58"></td>
<td bgColor="#ACFA58"></td>
<td bgColor="#82FA58"></td>
<td bgColor="#58FA58"></td>
<td bgColor="#58FA82"></td>
<td bgColor="#58FAAC"></td>
<td bgColor="#58FAD0"></td>
<td bgColor="#58FAF4"></td>
<td bgColor="#58D3F7"></td>
<td bgColor="#58ACFA"></td>
<td bgColor="#5882FA"></td>
<td bgColor="#5858FA"></td>
<td bgColor="#8258FA"></td>
<td bgColor="#AC58FA"></td>
<td bgColor="#D358F7"></td>
<td bgColor="#FA58F4"></td>
<td bgColor="#FA58D0"></td>
<td bgColor="#FA58AC"></td>
<td bgColor="#FA5882"></td>
<td bgColor="#BDBDBD"></td>
</tr>
<tr>
<td bgColor="#FE2E2E"></td>
<td bgColor="#FE642E"></td>
<td bgColor="#FE9A2E"></td>
<td bgColor="#FACC2E"></td>
<td bgColor="#F7FE2E"></td>
<td bgColor="#C8FE2E"></td>
<td bgColor="#9AFE2E"></td>
<td bgColor="#64FE2E"></td>
<td bgColor="#2EFE2E"></td>
<td bgColor="#2EFE64"></td>
<td bgColor="#2EFE9A"></td>
<td bgColor="#2EFEC8"></td>
<td bgColor="#2EFEF7"></td>
<td bgColor="#2ECCFA"></td>
<td bgColor="#2E9AFE"></td>
<td bgColor="#2E64FE"></td>
<td bgColor="#2E2EFE"></td>
<td bgColor="#642EFE"></td>
<td bgColor="#9A2EFE"></td>
<td bgColor="#CC2EFA"></td>
<td bgColor="#FE2EF7"></td>
<td bgColor="#FE2EC8"></td>
<td bgColor="#FE2E9A"></td>
<td bgColor="#FE2E64"></td>
<td bgColor="#A4A4A4"></td>
</tr>
<tr>
<td bgColor="#FF0000"></td>
<td bgColor="#FF4000"></td>
<td bgColor="#FF8000"></td>
<td bgColor="#FFBF00"></td>
<td bgColor="#FFFF00"></td>
<td bgColor="#BFFF00"></td>
<td bgColor="#80FF00"></td>
<td bgColor="#40FF00"></td>
<td bgColor="#00FF00"></td>
<td bgColor="#00FF40"></td>
<td bgColor="#00FF80"></td>
<td bgColor="#00FFBF"></td>
<td bgColor="#00FFFF"></td>
<td bgColor="#00BFFF"></td>
<td bgColor="#0080FF"></td>
<td bgColor="#0040FF"></td>
<td bgColor="#0000FF"></td>
<td bgColor="#4000FF"></td>
<td bgColor="#8000FF"></td>
<td bgColor="#BF00FF"></td>
<td bgColor="#FF00FF"></td>
<td bgColor="#FF00BF"></td>
<td bgColor="#FF0080"></td>
<td bgColor="#FF0040"></td>
<td bgColor="#848484"></td>
</tr>
<tr>
<td bgColor="#DF0101"></td>
<td bgColor="#DF3A01"></td>
<td bgColor="#DF7401"></td>
<td bgColor="#DBA901"></td>
<td bgColor="#D7DF01"></td>
<td bgColor="#A5DF00"></td>
<td bgColor="#74DF00"></td>
<td bgColor="#3ADF00"></td>
<td bgColor="#01DF01"></td>
<td bgColor="#01DF3A"></td>
<td bgColor="#01DF74"></td>
<td bgColor="#01DFA5"></td>
<td bgColor="#01DFD7"></td>
<td bgColor="#01A9DB"></td>
<td bgColor="#0174DF"></td>
<td bgColor="#013ADF"></td>
<td bgColor="#0101DF"></td>
<td bgColor="#3A01DF"></td>
<td bgColor="#7401DF"></td>
<td bgColor="#A901DB"></td>
<td bgColor="#DF01D7"></td>
<td bgColor="#DF01A5"></td>
<td bgColor="#DF0174"></td>
<td bgColor="#DF013A"></td>
<td bgColor="#6E6E6E"></td>
</tr>
<tr>
<td bgColor="#B40404"></td>
<td bgColor="#B43104"></td>
<td bgColor="#B45F04"></td>
<td bgColor="#B18904"></td>
<td bgColor="#AEB404"></td>
<td bgColor="#86B404"></td>
<td bgColor="#5FB404"></td>
<td bgColor="#31B404"></td>
<td bgColor="#04B404"></td>
<td bgColor="#04B431"></td>
<td bgColor="#04B45F"></td>
<td bgColor="#04B486"></td>
<td bgColor="#04B4AE"></td>
<td bgColor="#0489B1"></td>
<td bgColor="#045FB4"></td>
<td bgColor="#0431B4"></td>
<td bgColor="#0404B4"></td>
<td bgColor="#3104B4"></td>
<td bgColor="#5F04B4"></td>
<td bgColor="#8904B1"></td>
<td bgColor="#B404AE"></td>
<td bgColor="#B40486"></td>
<td bgColor="#B4045F"></td>
<td bgColor="#B40431"></td>
<td bgColor="#585858"></td>
</tr>
<tr>
<td bgColor="#8A0808"></td>
<td bgColor="#8A2908"></td>
<td bgColor="#8A4B08"></td>
<td bgColor="#886A08"></td>
<td bgColor="#868A08"></td>
<td bgColor="#688A08"></td>
<td bgColor="#4B8A08"></td>
<td bgColor="#298A08"></td>
<td bgColor="#088A08"></td>
<td bgColor="#088A29"></td>
<td bgColor="#088A4B"></td>
<td bgColor="#088A68"></td>
<td bgColor="#088A85"></td>
<td bgColor="#086A87"></td>
<td bgColor="#084B8A"></td>
<td bgColor="#08298A"></td>
<td bgColor="#08088A"></td>
<td bgColor="#29088A"></td>
<td bgColor="#4B088A"></td>
<td bgColor="#6A0888"></td>
<td bgColor="#8A0886"></td>
<td bgColor="#8A0868"></td>
<td bgColor="#8A084B"></td>
<td bgColor="#8A0829"></td>
<td bgColor="#424242"></td>
</tr>
<tr>
<td bgColor="#610B0B"></td>
<td bgColor="#61210B"></td>
<td bgColor="#61380B"></td>
<td bgColor="#5F4C0B"></td>
<td bgColor="#5E610B"></td>
<td bgColor="#4B610B"></td>
<td bgColor="#38610B"></td>
<td bgColor="#21610B"></td>
<td bgColor="#0B610B"></td>
<td bgColor="#0B6121"></td>
<td bgColor="#0B6138"></td>
<td bgColor="#0B614B"></td>
<td bgColor="#0B615E"></td>
<td bgColor="#0B4C5F"></td>
<td bgColor="#0B3861"></td>
<td bgColor="#0B2161"></td>
<td bgColor="#0B0B61"></td>
<td bgColor="#210B61"></td>
<td bgColor="#380B61"></td>
<td bgColor="#4C0B5F"></td>
<td bgColor="#610B5E"></td>
<td bgColor="#610B4B"></td>
<td bgColor="#610B38"></td>
<td bgColor="#610B21"></td>
<td bgColor="#2E2E2E"></td>
</tr>
<tr>
<td bgColor="#3B0B0B"></td>
<td bgColor="#3B170B"></td>
<td bgColor="#3B240B"></td>
<td bgColor="#3A2F0B"></td>
<td bgColor="#393B0B"></td>
<td bgColor="#2E3B0B"></td>
<td bgColor="#243B0B"></td>
<td bgColor="#173B0B"></td>
<td bgColor="#0B3B0B"></td>
<td bgColor="#0B3B17"></td>
<td bgColor="#0B3B24"></td>
<td bgColor="#0B3B2E"></td>
<td bgColor="#0B3B39"></td>
<td bgColor="#0B2F3A"></td>
<td bgColor="#0B243B"></td>
<td bgColor="#0B173B"></td>
<td bgColor="#0B0B3B"></td>
<td bgColor="#170B3B"></td>
<td bgColor="#240B3B"></td>
<td bgColor="#2F0B3A"></td>
<td bgColor="#3B0B39"></td>
<td bgColor="#3B0B2E"></td>
<td bgColor="#3B0B24"></td>
<td bgColor="#3B0B17"></td>
<td bgColor="#1C1C1C"></td>
</tr>
<tr>
<td bgColor="#2A0A0A"></td>
<td bgColor="#2A120A"></td>
<td bgColor="#2A1B0A"></td>
<td bgColor="#29220A"></td>
<td bgColor="#292A0A"></td>
<td bgColor="#222A0A"></td>
<td bgColor="#1B2A0A"></td>
<td bgColor="#122A0A"></td>
<td bgColor="#0A2A0A"></td>
<td bgColor="#0A2A12"></td>
<td bgColor="#0A2A1B"></td>
<td bgColor="#0A2A22"></td>
<td bgColor="#0A2A29"></td>
<td bgColor="#0A2229"></td>
<td bgColor="#0A1B2A"></td>
<td bgColor="#0A122A"></td>
<td bgColor="#0A0A2A"></td>
<td bgColor="#120A2A"></td>
<td bgColor="#1B0A2A"></td>
<td bgColor="#220A29"></td>
<td bgColor="#2A0A29"></td>
<td bgColor="#2A0A22"></td>
<td bgColor="#2A0A1B"></td>
<td bgColor="#2A0A12"></td>
<td bgColor="#151515"></td>
</tr>
<tr>
<td bgColor="#190707"></td>
<td bgColor="#190B07"></td>
<td bgColor="#191007"></td>
<td bgColor="#181407"></td>
<td bgColor="#181907"></td>
<td bgColor="#141907"></td>
<td bgColor="#101907"></td>
<td bgColor="#0B1907"></td>
<td bgColor="#071907"></td>
<td bgColor="#07190B"></td>
<td bgColor="#071910"></td>
<td bgColor="#071914"></td>
<td bgColor="#071918"></td>
<td bgColor="#071418"></td>
<td bgColor="#071019"></td>
<td bgColor="#070B19"></td>
<td bgColor="#070719"></td>
<td bgColor="#0B0719"></td>
<td bgColor="#100719"></td>
<td bgColor="#140718"></td>
<td bgColor="#190718"></td>
<td bgColor="#190714"></td>
<td bgColor="#190710"></td>
<td bgColor="#19070B"></td>
<td bgColor="#000000"></td>
</tr>
</table>
</body>
</html>

compare two html tables data line by line and highlight using jquery

I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
how to do it on clicking button using JS/jquery on clientside?
Table 1 is -
<table class="table loadTable" id ="table1">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode </td>
<td nowrap="">int </td>
<td nowrap="">YES </td>
<td nowrap="">NULL </td>
<td nowrap="">10 </td>
</tr>
<tr>
<td nowrap="">Number </td>
<td nowrap="">varchar </td>
<td nowrap="">NO </td>
<td nowrap="">20 </td>
<td nowrap="">NULL </td>
<td nowrap="">PRI </td>
</tr><tr>
<td nowrap="">Type </td>
<td nowrap="">tinyint </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">3 </td>
<td nowrap="">PRI </td>
</tr>
<tr>
<td nowrap="">Date </td>
<td nowrap="">smalldatetime </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">NULL </td>
</tr>
</tbody>
table 2 is -
<table class="table loadTable" id ="table2">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode</td>
<td nowrap="">int</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">10</td>
<td nowrap=""></td>
</tr>
<tr>
<td nowrap="">PhoneNumber</td>
<td nowrap="">varchar</td>
<td nowrap="">NO</td>
<td nowrap="">20</td>
<td nowrap="">NULL</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">Type</td>
<td nowrap="">tinyint</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">3</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">EffectiveDate</td>
<td nowrap="">datetime</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">NULL</td>
<td nowrap=""></td>
</tr>
</tbody>
</table>
if we click on following button then table 2 should get highlighted with any non matching data with table2.
<div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>

I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.
function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
var t1row = $(this);
var t2row = $(t2rows[index]);
var t2tds = t2row.find('td');
t1row.find('td').each(function(index){
if($(this).text().trim() != $(t2tds[index]).text().trim() ){
console.log('difference: table1:('+$(this).text()+') table2:('+$(t2tds[index]).text()+')');
//set row in error
return;
}
});
});
}

Categories

Resources