Please look at this JSFiddle as reference.
Using tablesort and the accompanying css, I am trying to get the rows with first/last name to have alternating row colors. Also, I need the rows in the sub-table with date and time to have a white background.
I think part of my problem is that I also have a different class on the first td under the tablesort table. I need that class to kick off the trigger to toggle the hidden row... I just can't seem to get the CSS right.
Here is my HTML
<table class="tablesorter" id="table1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
</tr>
</thead>
<tbody>
<tr class="parent-row">
<td>John</td>
<td>Appleseed</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">
<table class="sub-table" id="SPID" border=1>
<thead>
<th>Date</th>
<th>Time</th>
</thead>
<tbody>
<tr>
<td>12/1/13</td>
<td>4:00AM</td>
</tr>
<tr>
<td>12/1/14</td>
<td>7:00AM</td>
</tr>
<tr>
<td>12/1/15</td>
<td>6:00AM</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent-row">
<td>David</td>
<td>Goliath</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">Detail about David</td>
</tr>
<tr class="parent-row">
<td>Amie</td>
<td>Winehouse</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">Detail About Amie</td>
</tr>
</tbody>
And Here is the CSS
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
table.tablesorter tr.parent-row td {
background: #8dccc8;
}
table.tablesorter tr.parent-row-details td {
background: grey;
}
table.sub-table thead tr th {
background-color: #FFF;
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}
table.sub-table tbody tr td {
background-color: green;
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}
is this something like you wanted?
http://jsfiddle.net/johnboker/q7VL3/116/
added > td
$(document).ready(function () {
$("table.tablesorter tr.parent-row:even > td").css("background-color", "blue");
});
also changed
table.sub-table tbody tr td {
background-color: white; /* made this white */
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}
Related
How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>
I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}
set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have got a HTML table built like this:
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table.sortable, tbody {
counter-reset: sortabletablescope;
vertical-align: middle;
}
table.sortable, thead tr::before {
content: "";
display: table-cell;
vertical-align: middle;
}
table.sortable, tbody tr::before {
content: counter(sortabletablescope);
counter-increment: sortabletablescope;
display: table-cell;
vertical-align: middle;
text-align: center;
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1990<br>data1</td><td>data2</td></tr>
<td>2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I am trying to move the list number so it looks like its part of the table, and not printed before, so there is no whitespace before "Name" in the table header. Like how it looks here (here the numbers are added manually):
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1. 1990<br>data1</td><td>data2</td></tr>
<td>2. 2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I have managed to get the number where I want it by using
position: relative; bottom: -6px;
position: relative; left: +25px;
But that doesn't remove the whitespaces before "Name" in the table header. Is this possible to change?
You can use a CSS counter indeed via the :before pseudo-element style like a table-cell: (but there got to be one on each row to preserve the right amount of columns)
Sizing the pseudo-element will allow you to set a negative text-indent on the first th to align it to the far left
example
/* pseudo tr:before for CSS COUNTER for table tr */
tr:before {
content: '';
display: table-cell;
vertical-align: middle;
}
thead th:first-child {
text-indent: -1.5em;
}
tbody {
counter-reset: trs
}
tbody tr:before {
counter-increment: trs;
content: counter(trs)'. ';
width: 1.5em;
text-align: right;
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
Mind the structure of your table to have no surprise once rendered by browsers.
if it needs to be inside the first cell, then set the counter to the first td and let it float
/* pseudo tr:before for CSS COUNTER for table tr */
tbody {
counter-reset: trs
}
tbody td:first-child:before {
counter-increment: trs;
content: counter(trs)'. ';
float:left
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
i have a situation where i'm able to highlight each hover row, but active row has same background which merge up as shown below
Active and hover state merge up shown below:
Problem: as shown above in image active and hover are mixing .
here is my jsfiddle:https://jsfiddle.net/dB93J/4212/
below is my code:
$('tbody tr').on('click',function(){
$('tbody tr').removeClass('active-class');
$(this).addClass('active-class');
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
tbody tr:hover{
background:#ccc;
}
.active-class{
background:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>
I would recommend changing the background color of the .active-class selector to a darker shade and changing the background color of the tbody tr:hover selector to a lighter shade. See the attached example. I use https://www.color-hex.com/ to look up hex codes and shades.
$('tbody tr').on('click',function(){
$('tbody tr').removeClass('active-class');
$(this).addClass('active-class');
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
tbody tr:hover{
background:#dbdbdb;
}
.active-class{
background:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>
If you can't change the hover or active color, you can increase the width of the border on .active-class to make the separation more clear.
$('tbody tr').on('click',function(){
$('tbody tr').removeClass('active-class');
$(this).addClass('active-class');
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
tbody tr:hover{
background:#ccc;
}
.active-class{
background:#ccc;
border: solid 4px #DDEEEE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>
Agreed. A little confusing, but I would recommend that you just change the color of either the hover class or the active class to avoid the confusion you seem to be seeing. Just make sure to keep the hex color the same length (3 digits for both or six digits for both, using different lengths might confuse the render). IE:
tbody tr:hover{
background:#d7d;
}
.active-class{
background:#ccc;
}
Hope this helps!
I am not sure if I understood correctly, but you are using a class in an element call .active-class with the same background colour as tr:hover.
Because :hover selector : The :hover selector can be used on all elements... This means that every element including the elements with the class .active-class will have the hover selector as well.
In other words the only way you can avoid active and hover mixing together is changing the background colour or the style of the element when .active-class (or tr:hover) is assigned to that element.
Hope this could be helpful.
Here is the situation, I have a HTML file with a table, the table gets filled with XML data. The last column (10) got a number in it: 1, 2, 3, 4 or 5. I've got 5 lines of jQuery which look for the number and give the cell with the corresponding number a specific class, this works fine (The cell has 0% opacity because it's not meant to be "shown", but for our means, it works fine like that).
Now the problem is: Column 7 and 8 need to get that class to without the whole column getting it, just the row with the specific number.
I've got a jsfiddle so you can see the code and stuff:
The jQuery:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
Note: The data in the table is just for testing, the real xml will have those number of 1, 2, 3, 4, 5 in like 100 rows in a random order.
EDIT: Got a picture of how it should look:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
td:nth-child(10) {
opacity: 0;
}
.disaster{
background-color: #E45858
}
.high{
background-color: #E87658
}
.average{
background-color: #FEA058
}
.warning{
background-color: #FEC858
}
.information{
background-color: #7498FE
}
/*CSS for main elements*/
div {
max-width: 2600px;
display: block;
}
body {
font-family: Arial, Tahoma, Verdana, sans-serif;
background-color: #FFFFFF;
}
table {
text-align: left;
border-collapse: collapse;
}
th {
font-size: 75%;
font-weight: normal;
color: #768C98;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 2px solid #DCE2E4;
}
td {
font-size: 75%;
color: #1F2C33;
height: 25px;
padding-top: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #EAEEF0;
}
img {
position: absolute; left: -100px;
margin-top: 165px;
transform: rotate(270deg);
}
/*CSS for Hover*/
td:nth-child(1):hover{
text-decoration: underline;
}
td:nth-child(1) {
background-color: #FFFFFF;
}
td:nth-child(2) {
background-color: #FFFFFF;
}
tr.NoHover:hover{
background-color: #FFFFFF;
}
tr:hover {
background-color: #E8F5FF;
}
/*Column specific CSS*/
th.col1 {
text-align: right;
width: 240px;
padding-right: 18px
}
th.col2 {
width: 11px;
padding: none;
}
th.col3 {
text-align: left;
width: 188px;
padding-left: 10px;
}
th.col4 {
text-align: left;
width: 70px;
}
th.col5 {
text-align: left;
width: 77px;
padding-left: 82px;
}
th.col6 {
text-align: left;
width: 430px;
}
th.col7 {
text-align: left;
padding-left: 10px;
width: 497px;
}
th.col8 {
text-align: left;
width: 498px;
}
th.col9 {
text-align: left;
padding-left: 10px;
width: 75px;
}
td:nth-child(1) {
text-align: right;
color: #0274B8;
padding-right: 18px;
border-right: 2px solid #AAD6F0;
border-bottom: none;
}
td:nth-child(2) {
color: white;
border-bottom: none;
width: 11px;
padding: none;
}
td:nth-child(3) {
text-align: left;
text-decoration: underline dotted;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(4) {
text-align: left;
color: #DC0000;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(5) {
text-align: right;
text-decoration: underline dotted;
padding-right: 15px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(6) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(7) {
text-align: left;
text-decoration: underline dotted ;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(8) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(9) {
text-align: left;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<div id="main">
<table id="Table">
<thead>
<tr class="NoHover">
<th class="col1" scope='col' >Time▼</th>
<th class="col2" scope='col' ></th>
<th class="col3" scope='col' >Client</th>
<th class="col4" scope='col' >Status</th>
<th class="col5" scope='col' >Site</th>
<th class="col6" scope='col' >Host</th>
<th class="col7" scope='col' >Problem • Cause</th>
<th class="col8" scope='col' ></th>
<th class="col9" scope='col' >Frequency</th>
<th class="col10" scope='col'></th>
</tr>
</thead>
<tbody id="TableData">
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 1</td>
<td>FAILING</td>
<td>Site 1</td>
<td>PC1</td>
<td>test1</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>1</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 2</td>
<td>FAILING</td>
<td>Site 2</td>
<td>PC2</td>
<td>test2</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>2</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 3</td>
<td>FAILING</td>
<td>Site 3</td>
<td>PC3</td>
<td>test3</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>3</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 4</td>
<td>FAILING</td>
<td>Site 4</td>
<td>PC4</td>
<td>test4</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>4</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 5</td>
<td>FAILING</td>
<td>Site 5</td>
<td>PC5</td>
<td>test5</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>
I think you are looking for the .siblings() selector:
$("td:nth-child(10):contains('1')").siblings('td:nth-child(7), td:nth-child(8)').addClass('disaster');
$("td:nth-child(10):contains('2')").siblings('td:nth-child(7), td:nth-child(8)').addClass('high');
$("td:nth-child(10):contains('3')").siblings('td:nth-child(7), td:nth-child(8)').addClass('average');
$("td:nth-child(10):contains('4')").siblings('td:nth-child(7), td:nth-child(8)').addClass('warning');
$("td:nth-child(10):contains('5')").siblings('td:nth-child(7), td:nth-child(8)').addClass('information');
Fiddle: https://jsfiddle.net/8sL86sc7/2/
Something like this maybe? (Fiddle)
$("tr").each(function(index) {
var row = $(this),
lastCol = row.find('td:nth-child(10)'),
appendTo = row.find('td:nth-child(7), td:nth-child(8), td:nth-child(10)');
switch(lastCol.text()) {
case '1':
appendTo.addClass('disaster');
break;
case '2':
appendTo.addClass('high');
break;
case '3':
appendTo.addClass('average');
break;
case '4':
appendTo.addClass('warning');
break;
case '5':
appendTo.addClass('information');
break;
}
});
If there are a lot of rows and you don't need extra stuff to happen exept for the added classes, this could be overkill. the .siblings() selector (as in this answer) could be enough.
I am trying to design a table wherein at mobile view the last two to three columns which are not visible in mobile view should be made collapsible using only CSS and if possible Javascript not jQuery. This is to be done for salesforce web application so no jQuery is allowed. Any help would great.
Tried with this example:
http://codepen.io/anon/pen/QwPVNW
This is somewhat similar but I am unable to break the last two to three columns data and show it below.
body {
font-family: arial;
}
table {
border: 1px solid #ccc;
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th,
table td {
padding: 10px;
text-align: center;
}
table th {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
<table>
<thead>
<tr>
<th>Payment</th>
<th>Issue Date</th>
<th>Amount</th>
<th>Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Payment">Payment #1</td>
<td data-label="Issue Date">02/01/2015</td>
<td data-label="Amount">$2,311</td>
<td data-label="Period">01/01/2015 - 01/31/2015</td>
</tr>
<tr>
<td data-label="Payment">Payment #2</td>
<td data-label="Issue Date">03/01/2015</td>
<td data-label="Amount">$3,211</td>
<td data-label="Period">02/01/2015 - 02/28/2015</td>
</tr>
</tbody>
</table>