HTML - Set proper alignment of image and text in html table - javascript

I tried to set the alignment of image and text in HTML table and generate pdf using jsPDF but I was unable to set proper image alignment along with text, your help saves my day
[![enter image description here][1]][1]
Here is my code, your help is most appreciated
<html>
<head>
<title>Theme1</title>
</head>
<body>
<table style="width: 565px;margin: 15px; border:4px solid #ddd;font-size: 12px;position: relative; color: #212529">
<tr style="width: 100%">
<td style="width: 100%">
<table>
<tr>
<th style="text-align: center;" colspan="3" width="100%">
<h4>Biodata</h4>
</th>
</tr>
<tr rowspan="4">
<td colspan="2" style="padding: 15px; width: 80%">
<table>
<tr>
<td style="width: 50%">
<b>Name</b>
</td>
<td style="width: 50%">
{{name}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Father Name</b>
</td>
<td style="width: 50%">
{{fatherName}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Father's Occupation</b>
</td>
<td style="width: 50%">
{{fatherOccupation}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Mother Name</b>
</td>
<td style="width: 50%">
{{motherName}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Mother's Occupation</b>
</td>
<td style="width: 50%">
{{motherOccupation}}
</td>
</tr>
</table>
</td>
<td style="width: 20%">
<img src="{{profileImage}}" width="100" style="border-radius: 5px; border-width: 1px ;border-color: #4e555b; border-style: solid; width: 100px;" />
</td>
</tr>
<tr>
<td width="35%">
<b>email</b>
</td>
<td width="35%">
{{email}}
</td>
</tr>
<tr>
<td width="35%">
<b>Date of Birth</b>
</td>
<td width="35%">
{{dob}}
</td>
</tr>
<tr>
<td width="35%">
<b>Place of Birth</b>
</td>
<td width="35%">
{{placeOfBirth}}
</td>
</tr>
<tr>
<td width="35%">
<b>Occupation</b>
</td>
<td width="35%">
{{occupation}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I tried for a day but it still persists


If I interpreted your target state correctly, this might be helping you to achieve what you want.
<span style="display: flex; justify-content:center; margin-top:2em">
<h1>Biodata</h1></span>
<table style="margin-left: 2em;text-align:left">
<tr>
<th>Name</th>
<td>{{name}}</td>
<td rowspan=5 style="background-color: red;">Image here</td>
</tr>
<tr>
<th>Father's name</th>
<td>{{fathersName}}</td>
</tr>
<tr>
<th>Mother's name</th>
<td>{{mothersName}}</td>
</tr>
<tr>
<th>Mother's occupation</th>
<td>{{mothersOccupation}}</td>
</tr>
<tr>
<th>eMail address</th>
<td>{{emailAddress}}</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>{{dateOfBirth}}</td>
</tr>
<tr>
<th>Place of Birth</th>
<td>{{placeOfBirth}}</td>
</tr>
<tr>
<th>Occupation</th>
<td>{{occupation}}</td>
</tr>
</table>

Related

Uncaught TypeError: Cannot read property 'name' of undefined at tableToJson

I am having a template file which I am trying to convert into pdf. After googling a bit I found a framework called JSPDf. When I am trying to use it it gives me error Uncaught TypeError: Cannot read property 'name' of undefined jspdf.
we have two button 1->printDiv this one is working fine.
2->saveDiv this button having issue.when we are pressing this button to download pdf
i get console error like Uncaught TypeError: Cannot read property 'name' of undefined at tableToJson(jspdf.debug.js).
Here is My Code i put all code in single file.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script>
var doc = new jsPDF();
function saveDiv(divId, title) {
doc.fromHTML(`<html><head><title>${title}</title></head><body>` + document.getElementById(divId).innerHTML + `</body></html>`);
doc.save('div.pdf');
}
function printDiv(divId,
title) {
let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');
mywindow.document.write(`<html><head><title>${title}</title>`);
mywindow.document.write('</head><body >');
mywindow.document.write(document.getElementById(divId).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
</script>
<style>
tbody {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<p> </p>
<div id="pdf">
<p>
<font size="6" color="black"></font>
<table border="1" width="600">
<tbody>
<tr>
<td width="96">
<p><strong>PROJECT TITLE</strong></p>
</td>
<td colspan="3" width="225">
<p>HYATT CENTRIC KOTA KINABALU</p>
<p><Project N ame></p>
</td>
<td colspan="3" width="97">
<p><strong>PROJ.NO</strong></p>
</td>
<td colspan="2" width="182">
<p>HCKK1904</p>
<p><Project code></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>LOCATION</strong></p>
</td>
<td colspan="8" width="504">
<p>Lot 017512533 Along Jalan Haji Saman, 88000 Kota Kinabalu, Sabah.</p>
<p><Location></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>NO</strong></p>
</td>
<td colspan="3" width="225">
<p>RFI-001 <operation prefix -in sequence no></p>
</td>
<td colspan="2" width="96">
<p><strong>DATE</strong></p>
</td>
<td colspan="3" width="183">
<p>23/1/2020</p>
<p><Created date></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>TITLE</strong></p>
</td>
<td colspan="8" width="504">
<p>HCKK Blueprint Document</p>
<p><user entered title of operation title field></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>ASSIGNED TO</strong></p>
</td>
<td colspan="4" width="227">
<p>David Khor (Sunhill Ventures Sdn Bhd)</p>
<p><Assign To></p>
</td>
<td width="94">
<p><strong>PURPOSE</strong></p>
</td>
<td colspan="3" width="183">
<p>Approval</p>
<p><purpose></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>CC USERS</strong></p>
</td>
<td colspan="3" width="225">
<p>Chirs Chiew (Sunhill Ventures Sdn Bhd)<br /> Roy Chiew (Sunhill Ventures Sdn Bhd)</p>
<p><Cc user name’s></p>
</td>
<td colspan="2" width="96">
<p><strong>REQUESTED BY</strong></p>
</td>
<td colspan="3" width="183">
<p>Manfred weber</p>
<p>(Sunhill Ventures Sdn Bhd)</p>
<p><Created by name></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>DISCIPLINE</strong></p>
</td>
<td colspan="3" width="225">
<p>Architecture</p>
<p><User selected discipline ></p>
</td>
<td colspan="2" width="96">
<p><strong>DUE DATE:</strong></p>
</td>
<td colspan="3" width="183">
<p>25/1/2020</p>
<p><Action by></p>
</td>
</tr>
<tr>
<td colspan="9" width="600"> </td>
</tr>
<tr>
<td colspan="9" width="600">
<p><strong>DESCRIPTION</strong></p>
</td>
</tr>
<tr>
<td colspan="9" width="600">
<p>Sending the blueprint of the hckk1904 document for approval</p>
<p><Initiator description></p>
</td>
</tr>
<tr>
<td colspan="9" width="600"> </td>
</tr>
<tr>
<td colspan="9" width="600">
<p><strong>RESPONDANT COMMENT</strong></p>
</td>
</tr>
<tr>
<td colspan="9" width="600">
<p>Approving the blueprint document<strong> DATE:</strong></p>
<p><strong><< the assignee comments ></strong></p>
</td>
</tr>
<tr>
<td colspan="2" width="101">
<p><strong>LEAD RESPONDANT</strong></p>
</td>
<td width="122">
<p>David Khor (Sunhill Ventures Sdn Bhd)</p>
<p><strong><Assignee></strong></p>
</td>
<td width="98">
<p><strong>RESPONSE</strong></p>
</td>
<td colspan="3" width="97">
<p>Approved</p>
<p><Assignee status></p>
</td>
<td width="97">
<p><strong>RESPONDED DATE</strong></p>
</td>
<td width="85">
<p>23/1/2020</p>
<p><Assignee edited on></p>
</td>
</tr>
<tr>
<td colspan="2" width="101">
<p><strong>DOCUMENTS ATTACHED</strong></p>
</td>
<td colspan="7" width="499">
<p>Filename.pdf</p>
<p><file attachment names of the Created by / Assignee></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>This is a system generated document, no signature is required.</p>
</p>
</div>
</body>
<button onclick="printDiv('pdf','New Operations Details')">print div</button>
<button onclick="saveDiv('pdf','New Operations Details')">save div as pdf</button>
</html>
please help me..

fromHTML() is no longer being maintained from jsPDF. As the author himself said:
https://github.com/MrRio/jsPDF/issues/2268#issuecomment-460108597

Exporting html to Excel / CSV using tableExport, the exported file loses its formatting

i am to trying export a report data / html to excel / csv using tableExport with this code logic
$('#tblRpt').tableExport({ type: 'csv', escape: 'false', tableName:
'yourTableName' });
this code works in other reports which has simple html structure. The report which i am trying to export has nested tables in it. The exported file loses its html formatting. I don't have choice to use third party plugin because of project optimization issues.
Please suggest me a way to solve this issue without using any third party tool/plugin, Thank you
This is the html of my report which i am trying to export.
<tbody><tr>
<td colspan="2" class="no-border-right"><strong></strong></td>
<td align="right" valign="top" class="no-border-left">10/01/2020
10:53</td>
</tr>
<tr>
<td width="20%" class="no-border-right"><strong>User: Practical Head
Office</strong></td>
<td width="60%" align="center" class="no-border-left no-border-right">
<strong id="MidRptHeading">
M.I.D Report - Curent Fleet Only
</strong> (01 Dec 2019 - 31 Dec 2019)
</td>
<td width="20%" align="right" valign="top" class="no-border-left">
<strong></strong></td>
</tr>
<tr>
<td colspan="3" style="padding: 0; border:0;">
<table width="100%" style="border-collapse:collapse; border-spacing: 0; margin: 0 auto;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th valign="top"><strong>Reg no</strong></th>
<th valign="top"><strong>Insure type</strong></th>
<th valign="top"><strong>Make</strong></th>
<th valign="top"><strong>Model type</strong></th>
<th valign="top"><strong>Derivative</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Engine size</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Date of Registration</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Value</strong></th>
<th valign="top" style="text-align: center;"><strong>Seats</strong></th>
<th align="right" valign="top" style="text-align: center;"><strong>Gross vcl wt</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Vehicle on date</strong></th>
<th align="center" valign="top" style="text-align: center;"><strong>Vehicle off date</strong></th>
<th valign="top"><strong>Location</strong></th>
<th valign="top" style="text-align: center;"><strong>VIN number</strong></th>
</tr>
</thead>
<tbody id="tblMidVehiclesList">
<tr>
<td valign="top">KP69WBZ</td>
<td valign="top">Car</td>
<td valign="top">NISSAN</td>
<td valign="top">QASHQAI</td>
<td valign="top">QASHQAI DIG-T TEKNA</td>
<td align="center" valign="top">1332</td>
<td align="center" valign="top">20/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">4</td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">05/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">SJNFFAJ11U2647316</td>
</tr>
<tr>
<td valign="top">BJ69JXU</td>
<td valign="top">Car</td>
<td valign="top">PEUGEOT</td>
<td valign="top">Peugeot GTL 1.2 GT LINE</td>
<td valign="top">308 GT LINE PURETECH S/S</td>
<td align="center" valign="top">1200</td>
<td align="center" valign="top">27/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">4</td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">10/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">VF3LPHNSJKS346785</td>
</tr>
<tr>
<td valign="top">KN69TGX</td>
<td valign="top">Van up to 3.5T</td>
<td valign="top">VOLKSWAGEN</td>
<td valign="top">Transporter T30</td>
<td valign="top">TRANSPORTER T30 H-LINE TD</td>
<td align="center" valign="top">1968</td>
<td align="center" valign="top">30/09/2019</td>
<td align="center" valign="top"></td>
<td align="center" valign="top">2</td>
<td align="center" valign="top">3000</td>
<td align="center" valign="top">12/12/2019</td>
<td align="center" valign="top">
</td>
<td valign="top">CHIPPENHAM</td>
<td align="center" valign="top">WV1ZZZ7HZKH180620</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="3" style="border-bottom: 1px solid #000; padding: 0;"></td>
</tr>
<tr>
<td colspan="3" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" style="border-collapse:collapse; border-spacing: 0; margin: 0 auto;" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="40%" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" class="table-summary">
<tbody><tr>
<td width="17%" valign="top"> </td>
<td width="14%" align="center" valign="top"><strong>At Start of Month</strong></td>
<td width="8%" align="center" valign="top"><strong>Current</strong></td>
</tr>
<tr>
<td valign="top"><strong>Owned vehicles</strong></td>
<td align="center" valign="top">21</td>
<td align="center" valign="top">0</td>
</tr>
<tr>
<td valign="top"><strong>Leased vehicles</strong></td>
<td align="center" valign="top">38</td>
<td align="center" valign="top">3</td>
</tr>
<tr>
<td valign="top"><strong>Temporary vehicles</strong></td>
<td align="center" valign="top">0</td>
<td align="center" valign="top">0</td>
</tr>
<tr>
<td valign="top"><strong>Total fleet</strong></td>
<td align="center" valign="top"><strong>59</strong></td>
<td align="center" valign="top"><strong>3</strong></td>
</tr>
</tbody></table>
</td>
<td width="30%" style="padding: 0; border:0; vertical-align:top;">
<table width="100%" class="table-summary">
<tbody><tr>
<td align="left" valign="top"> </td>
<td align="center" valign="top"><strong>Current fleet</strong></td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Car</strong></td>
<td align="center" valign="top">2</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Minibus</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Motorhome up to 3.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Motorhome 3.5T-7.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>MPV</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Van up to 3.5T</strong></td>
<td align="center" valign="top">1</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>Van 3.5T-7.5T</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> <strong>HP Cars</strong></td>
<td align="center" valign="top">0</td>
<td valign="top"> </td>
</tr>
</tbody></table>
</td>
<td width="30%" style="padding: 0; border:0; vertical-align:top;"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="3" valign="top" align="center" style="border-top: 1px solid #000;"><strong>End of report</strong></td>
</tr>
</tbody>

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..

How do I style a table so that specific boxes in the table change colors onclick?

How do I make the elements in this table change color from the background color to red and back to the default color when I click them?
<table align="center" style="height: 355px;" width="664" border="3px">
<tbody>
<tr>
<td style="width: 94px;">25</td>
<td style="width: 94px;">26</td>
<td style="width: 95px;">27</td>
<td style="width: 95px;">28</td>
<td style="width: 95px;">29</td>
<td style="width: 95px;">30</td>
<td style="width: 95px;"> </td>
</tr>
</tbody>
</table>

Add an onclick listener to the elements you want (I'm presuming that you are generating the cells dynamically)
<table align="center" style="height: 355px;" width="664" border="3px">
<tbody>
<tr>
<td style="width: 94px;" onclick="changeColor(this)">25</td>
<td style="width: 94px;">26</td>
<td style="width: 95px;">27</td>
<td style="width: 95px;">28</td>
<td style="width: 95px;">29</td>
<td style="width: 95px;">30</td>
<td style="width: 95px;"> </td>
</tr>
</tbody>
</table>
and in jquery you would do something like this (alternatively use javascript):
function changeColor(elt){
$elt = $(elt);
$elt.toggleClass("redBg");
}
In css:
.redBg{
background-color:red;
}

you can play with the classes, by appending and removing them as you want. Also you can change more style by this.
$(document).ready(function() {
$('.table tbody tr td').on('click', changeColor);
});
function changeColor() {
if(!this.classList.contains('first')){
this.classList.add('first');
this.classList.remove('second');
} else {
this.classList.remove('first');
this.classList.add('second');
}
}
.first{
background : red;
}
.second{
background : blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" class="table" style="height: 355px;" width="664" border="3px">
<tbody>
<tr>
<td style="width: 94px;">25</td>
<td style="width: 94px;">26</td>
<td style="width: 95px;">27</td>
<td style="width: 95px;">28</td>
<td style="width: 95px;">29</td>
<td style="width: 95px;">30</td>
<td style="width: 95px;"> </td>
</tr>
</tbody>
</table>

Simply use with classList.toggle('class')
document.querySelectorAll('tr td').forEach(function(a){
a.addEventListener('click',function(){
this.classList.toggle('color')
})
})
.color{
background-color:red;
}
<table align="center" style="height: 355px;" width="664" border="3px">
<tbody>
<tr>
<td style="width: 94px;">25</td>
<td style="width: 94px;">26</td>
<td style="width: 95px;">27</td>
<td style="width: 95px;">28</td>
<td style="width: 95px;">29</td>
<td style="width: 95px;">30</td>
<td style="width: 95px;"> </td>
</tr>
</tbody>
</table>

You should put something like data-color=true and then just assign them the color change
var td = document.getElementsByTagName("td"),
len = td.length,
i;
function changeColor(){
var color = this.style.background!="red";
this.style.background = (color?"red":"initial");
}
for(i=0;i<len;i+=1){
if(td[i].getAttribute("data-color")=="true"){
td[i].onclick = changeColor;
}
}
<table align="center" style="height: 355px;" width="664" border="3px">
<tbody>
<tr>
<td style="width: 94px;" data-color="true">25</td>
<td style="width: 94px;" data-color="true">26</td>
<td style="width: 95px;">27</td>
<td style="width: 95px;" data-color="true">28</td>
<td style="width: 95px;">29</td>
<td style="width: 95px;" data-color="true">30</td>
<td style="width: 95px;"> </td>
</tr>
</tbody>
</table>

Angular js - Fix headers of table

I am trying to fix the headers of a table . I have tried all the solutions from a web . But Nothing is working for me . So , My code is like
<div class="report-container">
<div class="row">
<div class="col-md-12 col-sm-12"
ng-class="updatingReportFieldValue ? 'table-container-disabled cursor-progress' : ''"
ng-show="!loadingReports">
<div class="suggestion">
<table class="table table-striped table-bordered table-header-fixed fixed_headers">
<thead class="text-center text-info">
<tr>
<th class="text-center">Annotation</th>
<th class="text-center">Field</th>
<th class="text-center">Message</th>
<th class="text-center">Score</th>
<tr>
</thead>
<tr ng-repeat="report in reports.data">
<td class="text-center">{{ report.attributes.annotation }}</td>
<td class="td-report-field">{{ report.attributes.field }}</td>
<td>{{ report.attributes.message }}</td>
<td class="text-center">{{ report.attributes.score }}</td>
</tr>
</table>
</div>
IN css I am not doing anything just ,
.report-container{
}
So , I tried different solutions , But I was facing the problem of
align the header to the table columns
.So , How can i solve this problems ? Any help will be appreciated ..

You could use flex. its super simple.
Here is an example. All you need to change is on ng-repeat instead of hard coded td values.
table {
display: flex;
flex-direction: column;
}
tr {
display: flex;
}
tbody {
overflow-y: scroll;
height: 200px;
}
th,
td {
flex: 1;
border: 1px dotted black;
text-align: center;
}
tr:nth-child(2n+1)>td {
background-color: #dcdcdc;
}
thead th {
color: white;
background-color: #454545;
}
<div class="suggestion">
<table class="table table-striped table-bordered table-header-fixed fixed_headers">
<thead class="text-center text-info">
<tr>
<th class="text-center">Annotation</th>
<th class="text-center">Field</th>
<th class="text-center">Message</th>
<th class="text-center">Score</th>
<tr>
</thead>
<tbody>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
<tr>
<td>Annotation
</td>
<td>Field
</td>
<td>Message
</td>
<td>1
</td>
</tr>
</tbody>
</table>
You need to adjust the flex values according to your needs. modified the snippet to have different column widths.
table {
display: flex;
flex-direction: column;
}
tr {
display: flex;
flex-wrap: nowrap;
}
tbody {
overflow-y: scroll;
height: 200px;
}
th,
td {
border: 1px solid black;
text-align: center;
}
.report-annotation {
flex: 1;
}
.report-field {
flex: 0.5;
}
.report-message {
flex: 2;
}
.report-score {
flex: 0.4;
}
tr:nth-child(2n+1)>td {
background-color: #dcdcdc;
}
thead th {
color: white;
background-color: #454545;
}
<div class="suggestion">
<table class="table table-striped table-bordered table-header-fixed fixed_headers">
<thead class="text-center text-info">
<tr>
<th class="text-center report-annotation">Annotation</th>
<th class="report-field">Field</th>
<th class="text-center report-message">Message</th>
<th class="text-center report-score">Score</th>
<tr>
</thead>
<tbody>
<tr>
<td class="report-annotation">Annotation
</td>
<td class=" report-field">Field
</td>
<td class=" report-message">Message
</td>
<td class="report-score">1
</td>
</tr>
<tr ng-repeat="report in reports.data">
<td class="text-center report-annotation">{{annotation }}</td>
<td class="report-field">{{field }}</td>
<td class="report-message">{{message }}</td>
<td class="text-center report-score">{{ score }}</td>
</tr>
</tbody>
</table>

Categories

Resources