Angular js - Fix headers of table

Angular js - Fix headers of table - javascript

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>

Related

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

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>

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

Jquery selecting td for nested tables

I have a child table declared inside a parent table row and I would like to toggle the visibility of the child table when a cell of the parent table has been clicked. The child table should be by default hidden when the page loads.
My click event on the parent td element (class showmore) is being detected but I am having trouble finding the right selector for changing the css property of the parent tr element(class order_extra_info) which contains the child table. By setting css property display:none on this row I would like to entirely hide the child table contained within.
With the current jquery code it seems I am selecting the child td. Any suggestions?
$(document).on('click', 'td.showmore', function() {
var id = ($(this).html());
if ($('tr.order_extra_info#' + id + ' td').is(":visible")) {
$('tr.order_extra_info#' + id + ' td').css("display", "none");
} else {
$( 'tr.order_extra_info#' + id + ' td' ).css("display","table-cell");
}
});
.order_extra_info {
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</td>
<td class="text-right">ID </td>
<td class="text-left">Status</td>
<td class="text-right">Total</td>
<td class="text-left">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_info" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Use $('tr.order_extra_info#' + id).toggle();
Your selector was correct but you are trying to check visibility and based on trying to show/hide which was wrong.
Instead of those redundant step only use .toggle() function of jquery.
Please check below snippet for more unserstanding.
$(document).on('click', 'td.showmore', function() {
var id = ($(this).html());
$('tr.order_extra_info#' + id).toggle();
});
.order_extra_info {
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</td>
<td class="text-right">ID </td>
<td class="text-left">Status</td>
<td class="text-right">Total</td>
<td class="text-left">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_info" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

You can do it like following using toggle().
$(document).on('click', 'td.showmore', function() {
$(this).closest('tr').next('tr.order_extra_info').toggle()
});

Just use .toggle()
$(document).on('click', 'td.showmore', function() {
var id = $(this).html();
$('tr.order_extra_info#' + id).toggle();
});
.order_extra_info {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</td>
<td class="text-right">ID</td>
<td class="text-left">Status</td>
<td class="text-right">Total</td>
<td class="text-left">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_info" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

$(document).on('click', 'td.showmore', function() {
var id = ($(this).html());
$('#'+ id).toggle();
});
.order_extra_info {
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</td>
<td class="text-right">ID </td>
<td class="text-left">Status</td>
<td class="text-right">Total</td>
<td class="text-left">Date</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_info" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Use jQuery .toogle() and CSS3 :nth-child() Selector
$(document).ready(function(){
$(".order_extra_info").each(function(){
$(this).click(function () {
$(this).next().toggle(".order-extra-infor-shown");
});
});
});
.order-extra-infor-shown {
display:inline !important;
}
.table tr:nth-child(2n){
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 1px;" class="text-center">
<input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);">
</th>
<th class="text-right">ID </th>
<th class="text-left">Status</th>
<th class="text-right">Total</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody>
<tr class="order_extra_info">
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1545</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_infos" id="1545">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra 1</td>
<td class="text-left" width="25%">Extra 2</td>
<td class="text-left" width="50%">Extra 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="order_extra_info">
<td class="text-center">
<input type="checkbox" name="selected[]" value="1545">
<td class="text-right showmore">1546</td>
<td class="text-left">waiting</td>
<td class="text-right">50</td>
<td class="text-left">18.09.2016</td>
</tr>
<tr class="order_extra_infos">
<td colspan="15">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-left" width="25%">Extra a</td>
<td class="text-left" width="25%">Extra b</td>
<td class="text-left" width="50%">Extra c</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
<td class="text-left">Data
<br>Data
<br>Data
<br>Data</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Add click event to TH pseudo element, get data attribute from TH and prevent TH event from firing on click

I am creating an HTML table which currently has a click event attached to the column heading TH to sort the table.
What I am now trying to do is to expand a column by showing additional hidden columns when you click "somewhere".
Now, my initial thought for this "somewhere" was to create a :pseudo element on each TH which has hidden columns (they all have a specific css class) and to attach the show event on to this :pseudo element, however, when I do this its triggering the column sorting.
I have tried changing $('.xxp').on('click', function () { to $('.xxp:before').on('click', function () { but I because the TH has data attributes that I need, when I use $(this).parent('th') I am not able to get the data so the expand is not firing.... Can you target the parent of a pseudo element?
So, looking at the snippet, I want to click on the green to sort the table, I want to click on the red to show the hidden columns but not trigger the sort at the same time (which it is currently).
$(document).ready(function () {
var openData = null;
$('.xxp').on('click', function () {
var $this = $(this),
colData = $this.data('col'),
openItem = $('.xx_' + colData + 'c'),
xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
moreInfoCols = $('.xMI_');
//reset the columns
xplodeCols.hide();
//check if we are closing the current col
if (openData == colData) {
//do something??
openData = null
moreInfoCols.show();
}
else {
openData = colData;
moreInfoCols.hide();
openItem.show();
}
});
});
//this is a dummy function for testing -
//I want the above code to run, but not this.
$('.xxp').on('click', function () {
// alert('Ooops! I did not want this event to fire!');
});
table td, table th {border:1px solid #ccc; width:30px}
td[class^='xx_'], th[class^='xx_'] {
display: none;
}
.xxp {background: #00ff00 !important;}
th[class^='xx_'] {
background: #ccc !important;
}
.xxp:before {
display:inline-block;
width:15px;
height:15px;
content:"";
background-color:#ff0000;
float:right;
position:absolute;
margin-top:-20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
<tbody>
<tr>
<th>No</th>
<th title="G" class="xxp" data-col="0">G</th>
<th title="G" class="xx_0c">.1</th>
<th title="G" class="xx_0c">.2</th>
<th title="G" class="xx_0c">.3</th>
<th title="G" class="xx_0c">.4</th>
<th title="G" class="xx_0c">.5</th>
<th title="G" class="xx_0c">.6</th>
<th title="G" class="xx_0c">.7</th>
<th title="G" class="xx_0c">.8</th>
<th title="G" class="xx_0c">.9</th>
<th title="F" class="xxp" data-col="1">F</th>
<th title="F" class="xx_1c">.1</th>
<th title="F" class="xx_1c">.2</th>
<th title="F" class="xx_1c">.3</th>
<th title="F" class="xx_1c">.4</th>
<th title="F" class="xx_1c">.5</th>
<th title="F" class="xx_1c">.6</th>
<th title="F" class="xx_1c">.7</th>
<th title="F" class="xx_1c">.8</th>
<th title="F" class="xx_1c">.9</th>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td> 3</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">1</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>0 </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td>0 </td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
</tbody>
</table>
And here is a fiddle: http://jsfiddle.net/wf_4/qkv510ot/

Ok, thanks to the suggestion from #bergi this is how I did it.
$(document).ready(function () {
var pseudoBtn = $('<span />').attr({ 'class': 'pseudoBtn' });
$('.xxp').prepend(pseudoBtn);
var openData = null;
$('.xxp span.pseudoBtn').on('click', function (e) {
e.stopPropagation();
var $this = $(this).parent('th'),
colData = $this.data('col'),
openItem = $('.xx_' + colData + 'c'),
xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
moreInfoCols = $('.xMI_');
//reset the columns
xplodeCols.hide();
//check if we are closing the current col
if (openData == colData) {
//do something??
openData = null
moreInfoCols.show();
}
else {
openData = colData;
moreInfoCols.hide();
openItem.show();
}
});
});
//this is a dummy function for testing -
//I want the above code to run, but not this.
$('.xxp').on('click', function () {
// alert('Ooops! I did not want this event to fire!');
});
table td, table th {border:1px solid #ccc; width:30px}
td[class^='xx_'], th[class^='xx_'] {
display: none;
}
.xxp {background: #00ff00 !important;}
th[class^='xx_'] {
background: #ccc !important;
}
.xxp > span.pseudoBtn {
display:inline-block;
width:15px;
height:15px;
background-color:#ff0000;
position:absolute;
margin-top:-20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
<tbody>
<tr>
<th>No</th>
<th title="G" class="xxp" data-col="0">G</th>
<th title="G" class="xx_0c">.1</th>
<th title="G" class="xx_0c">.2</th>
<th title="G" class="xx_0c">.3</th>
<th title="G" class="xx_0c">.4</th>
<th title="G" class="xx_0c">.5</th>
<th title="G" class="xx_0c">.6</th>
<th title="G" class="xx_0c">.7</th>
<th title="G" class="xx_0c">.8</th>
<th title="G" class="xx_0c">.9</th>
<th title="F" class="xxp" data-col="1">F</th>
<th title="F" class="xx_1c">.1</th>
<th title="F" class="xx_1c">.2</th>
<th title="F" class="xx_1c">.3</th>
<th title="F" class="xx_1c">.4</th>
<th title="F" class="xx_1c">.5</th>
<th title="F" class="xx_1c">.6</th>
<th title="F" class="xx_1c">.7</th>
<th title="F" class="xx_1c">.8</th>
<th title="F" class="xx_1c">.9</th>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td> 3</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">1</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>0 </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
<tr>
<td>0</td>
<td>0 </td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td class="xx_0c"></td>
<td>0 </td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
<td class="xx_1c"></td>
</tr>
<tr>
<td>0</td>
<td> 1</td>
<td class="xx_0c"> </td>
<td class="xx_0c">1</td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td class="xx_0c"> </td>
<td>2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c">2</td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
<td class="xx_1c"> </td>
</tr>
</tbody>
</table>

how to align my td's with equal width?

this is my html code:http://jsfiddle.net/Udxyb/427/
in the below code..Under each of these columns(section1, section2, section3, section4) i want two equal columns and these columns with should not vary if the input data is lenghty.
instead the width of both columns must remain the same rather than increase.is it possible???
<table id="main_table" style="width:100%">
<thead>
<tr class="firstline">
<th colspan="2">Column1</th>
<th colspan="2">Column2</th>
<th colspan="2">Column3</th>
<th colspan="2">Column4</th>
</tr>
</thead>
<tbody>
<tr style="width:1002px; background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 1 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td style="width:125px;">item 111sdfgadgrfag</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
<td>item 115</td>
<td>item 116</td>
<td>item 117</td>
<td>item 118dfgdfgdfgdfgg</td>
</tr>
<tr>
<td colspan="2">item 121</td>
<td colspan="2">item 122</td>
<td colspan="2">item 123</td>
<td colspan="2">item 124</td>
</tr>
<tr>
<td colspan="2">item 131</td>
<td colspan="2">item 132</td>
<td colspan="2">item 133</td>
<td colspan="2">item 134</td>
</tr>
</tbody>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 2 </td> <td colspan="2" class="flip" style="width:250px;"> Section 2 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">item 211</td>
<td colspan="2">item 212</td>
<td colspan="2">item 213</td>
<td colspan="2">item 214</td>
</tr>
<tr>
<td colspan="2">item 221</td>
<td colspan="2">item 222</td>
<td colspan="2">item 223</td>
<td colspan="2">item 224</td>
</tr>
<tr>
<td colspan="2">item 231</td>
<td colspan="2">item 232</td>
<td colspan="2">item 233</td>
<td colspan="2">item 234</td>
</tr>
</tbody>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
<td colspan="2" class="flip" style="width:250px;"> Section 3 </td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td colspan="2">item 311</td>
<td colspan="2">item 312</td>
<td colspan="2">item 313</td>
<td colspan="2">item 314</td>
</tr>
<tr>
<td colspan="2">item 321</td>
<td colspan="2">item 322</td>
<td colspan="2">item 323</td>
<td colspan="2">item 324</td>
</tr>
<tr>
<td colspan="2">item 331</td>
<td colspan="2">item 332</td>
<td colspan="2">item 333</td>
<td colspan="2">item 334</td>
</tr>
</tbody>
</table>

Write:
#main_table{table-layout:fixed;}
Updated fiddle here.

Assign fixed table layout property to your table and word-wrap:break-word; for the td's
Hope that will solves your problem
<table id="main_table" style="width:100%;table-layout:fixed;">
in css
td {
padding: 5px;
word-wrap:break-word;
}

Develop Reference

JavaScript is the programming language of the Web.

Angular js - Fix headers of table - javascript

Related

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

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

Jquery selecting td for nested tables

Add click event to TH pseudo element, get data attribute from TH and prevent TH event from firing on click

how to align my td's with equal width?

Categories

Resources