Hello beautiful people of SO. Hope you're having a good day. So I got this weird issue which I'm unable to solve.
I have a table of data. I want it to be at a collapsed state with scroll at first then if the button is pressed then the size will increase based on the table rows inside. By that I mean the height will be auto.
An example would be the table here on right: example
At this moment, the div shrinks but the data is overflowing out.
Here's the pen: Codepen
Here's the snippet:
const expandCollapseBtn = $('#expand-collapse-btn');
$(expandCollapseBtn).click((e) => {
const divHeight = $(".data-container").height();
if ( divHeight > 400 ) {
$(".data-container").animate({"height": "200px"}, 100);
}
else if ($(".data-container").css("height") == "200px") {
$(".data-container").animate({"height": "400px"}, 100);
}
});
.data-container {
min-height: 45px;
background: #fff;
-webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
position: relative;
}
.data-container .bg-light {
font-size: 1.1rem;
border-bottom: 1px solid rgba(0,0,0,0.125);
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
font-weight: 700;
}
.data-container h2 {
font-size: 18px;
margin: 0;
padding: 0;
}
section .data-container .table-container .table-striped > tbody > tr:nth-child(2n+1) > td {
background-color: #f8f9fa;
line-height: 15px;
}
.data-container .table-container table tr td:first-child {
padding-left: 50px;
width: 49%;
text-align: right;
}
.data-container .table-container table tr td:nth-child(2) {
padding: 5px 0 5px 0;
width: 2%;
}
.data-container .table-container table tr td:last-child {
padding-left: 6px;
width: 49%;
}
.data-container .table-container table td {
padding: 5px 18px 5px 20px;
}
.data-container .table-container a {
font-size: 10px;
color: red;
text-decoration: underline;
}
.data-container .table-container tr {
height: 45px;
}
#flag-image {
width: 25px;
height: 25px;
}
.data-container button {
background-color: transparent;
color: #343a40;
border: none;
outline: none;
position: absolute;
left: 50%;
border-bottom-style: dotted;
transform: translateX(-50%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data-container w-75 m-auto">
<div class="card-header bg-light text-center pt-3 pb-3">
<h2>
Total: $200
</h2>
</div>
<div class="table-container">
<table class="table-striped w-100">
<tbody>
<tr>
<td>1</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>3</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>4</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>5</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>6</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>7</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>8</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>9</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>10</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
<button id="expand-collapse-btn">expand ↓</button>
</div>
Any help would be highly appreciated. Thanks
You should apply overflow-y: scroll; to .data-container . Though, since the "expand" button is also placed inside this div, it will only appear near the bottom when the div is scrolled to the end. If you want the button to remain static, you can apply the height restriction and scroll on .table-container instead
A little change to your script worked.
And also added overflow: scroll css to your data-container
const expandCollapseBtn = $('#expand-collapse-btn');
$(expandCollapseBtn).click((e) => {
const divHeight = $(".data-container").height();
if (divHeight >= 400) {
$(".data-container").animate({
"height": "200px"
}, 100);
} else if (divHeight <= 200) {
$(".data-container").animate({
"height": "400px"
}, 100);
}
});
.data-container {
min-height: 45px;
background: #fff;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
position: relative;
overflow: scroll;
}
.data-container .bg-light {
font-size: 1.1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
font-weight: 700;
}
.data-container h2 {
font-size: 18px;
margin: 0;
padding: 0;
}
section .data-container .table-container .table-striped>tbody>tr:nth-child(2n+1)>td {
background-color: #f8f9fa;
line-height: 15px;
}
.data-container .table-container table tr td:first-child {
padding-left: 50px;
width: 49%;
text-align: right;
}
.data-container .table-container table tr td:nth-child(2) {
padding: 5px 0 5px 0;
width: 2%;
}
.data-container .table-container table tr td:last-child {
padding-left: 6px;
width: 49%;
}
.data-container .table-container table td {
padding: 5px 18px 5px 20px;
}
.data-container .table-container a {
font-size: 10px;
color: red;
text-decoration: underline;
}
.data-container .table-container tr {
height: 45px;
}
#flag-image {
width: 25px;
height: 25px;
}
.data-container button {
background-color: transparent;
color: #343a40;
border: none;
outline: none;
position: absolute;
left: 50%;
border-bottom-style: dotted;
transform: translateX(-50%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data-container w-75 m-auto">
<div class="card-header bg-light text-center pt-3 pb-3">
<h2>
Total: $200
</h2>
</div>
<div class="table-container">
<table class="table-striped w-100">
<tbody>
<tr>
<td>1</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>3</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>4</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>5</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>6</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>7</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>8</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>9</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>10</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
<button id="expand-collapse-btn">expand ↓</button>
</div>
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 want an element to disappear and reappear after scrolling from the top. I found javascript for this, but something is not right. I don't know much about JS, I found it here, inserted it, but it doesn't work as it should - it only makes element to change position. Multiple examples of javascript I found on StackExchange and on the Internet don't work either for some reason.
How do I make the element disappear after scrolling down and reappear after scrolling back to the top?
I also have set CSS for this element on smaller screens, should I make a separate script for smaller screens then?
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("stub").style.top = "0";
} else {
document.getElementById("stub").style.top = "150px";
}
prevScrollpos = currentScrollPos;
}
.stub {
background-color: #577284;
float: right;
position: fixed;
right: 0;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
padding: 10px;
border: 3px solid #ff8000;
margin-right: 1em;
}
#stublink {
color: #F3E0BE;
text-decoration: none;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
.pagenav {
background-color: #577284;
display: none;
text-transform: uppercase;
font-size: 0.8em;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
border: 3px solid #ff8000;
border-top: none;
padding-bottom: 10px;
}
.pagenav a {
display: block;
color: #F3E0BE;
padding: 6px 0px 0px 8px;
}
.pagenav a:hover {
box-shadow: inset 5px 0 0 0 #ff8000
}
body {
height: 200vh
}
;
#media only screen and (max-width: 670px) {
.stub {
right: 0;
left: auto;
top: 0;
bottom: auto;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
}
}
<body>
<div class="stub" id="stub">
<div class="pagenav">
<a href="#last">
<table>
<tr>
<td>02.19 03.20</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#previous">
<table>
<tr>
<td>02.18 02.19</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#dec17">
<table>
<tr>
<td>12.17 04.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#nov17">
<table>
<tr>
<td>11.17 01.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep16">
<table>
<tr>
<td>09.16 11.17</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep15">
<table>
<tr>
<td>09.15 08.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan15">
<table>
<tr>
<td>01.15 03.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan14">
<table>
<tr>
<td>01.14 08.15</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
</div><a id="stublink" href=#>Pagemenu</a>
</div>
<script></script>
</body>
change that line document.getElementById("stub").style.top = "0"; for that document.getElementById("stub").style.block = "block";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("stub").style.display = "block";
} else {
document.getElementById("stub").style.display = "none";
}
prevScrollpos = currentScrollPos;
}
.stub {
background-color: #577284;
float: right;
position: fixed;
right: 0;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
padding: 10px;
border: 3px solid #ff8000;
margin-right: 1em;
}
#stublink {
color: #F3E0BE;
text-decoration: none;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
.pagenav {
background-color: #577284;
display: none;
text-transform: uppercase;
font-size: 0.8em;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
border: 3px solid #ff8000;
border-top: none;
padding-bottom: 10px;
}
.pagenav a {
display: block;
color: #F3E0BE;
padding: 6px 0px 0px 8px;
}
.pagenav a:hover {
box-shadow: inset 5px 0 0 0 #ff8000
}
body {
height: 200vh
}
;
#media only screen and (max-width: 670px) {
.stub {
right: 0;
left: auto;
top: 0;
bottom: auto;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
}
}
<body>
<div class="stub" id="stub">
<div class="pagenav">
<a href="#last">
<table>
<tr>
<td>02.19 03.20</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#previous">
<table>
<tr>
<td>02.18 02.19</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#dec17">
<table>
<tr>
<td>12.17 04.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#nov17">
<table>
<tr>
<td>11.17 01.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep16">
<table>
<tr>
<td>09.16 11.17</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep15">
<table>
<tr>
<td>09.15 08.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan15">
<table>
<tr>
<td>01.15 03.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan14">
<table>
<tr>
<td>01.14 08.15</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
</div><a id="stublink" href=#>Pagemenu</a>
</div>
<script></script>
</body>
You need to play with the style.display property of the element with id "stub" and set it to:
"block" when prevScrollPos > currentScrollPos;
"none" in the other cases.
var prevScrollPos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
document.getElementById("stub").style.display = prevScrollPos > currentScrollPos ? "block" : "none";
prevScrollPos = currentScrollPos;
}
.stub {
background-color: #577284;
float: right;
position: fixed;
right: 0;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
padding: 10px;
border: 3px solid #ff8000;
margin-right: 1em;
}
#stublink {
color: #F3E0BE;
text-decoration: none;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
.pagenav {
background-color: #577284;
display: none;
text-transform: uppercase;
font-size: 0.8em;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
border: 3px solid #ff8000;
border-top: none;
padding-bottom: 10px;
}
.pagenav a {
display: block;
color: #F3E0BE;
padding: 6px 0px 0px 8px;
}
.pagenav a:hover {
box-shadow: inset 5px 0 0 0 #ff8000
}
body {
height: 200vh
}
;
#media only screen and (max-width: 670px) {
.stub {
right: 0;
left: auto;
top: 0;
bottom: auto;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
}
}
<div class="stub" id="stub">
<div class="pagenav">
<a href="#last">
<table>
<tr>
<td>02.19 03.20</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#previous">
<table>
<tr>
<td>02.18 02.19</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#dec17">
<table>
<tr>
<td>12.17 04.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#nov17">
<table>
<tr>
<td>11.17 01.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep16">
<table>
<tr>
<td>09.16 11.17</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep15">
<table>
<tr>
<td>09.15 08.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan15">
<table>
<tr>
<td>01.15 03.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan14">
<table>
<tr>
<td>01.14 08.15</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
</div><a id="stublink" href=#>Pagemenu</a>
</div>
I would use the intersection observer api
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Be careful if you want to use the display css property because with display property:
if an element is display: none it will not be rendered at all (try with visibility: hidden or with opacity: 0)
css transition do not work.
So I would suggest to use opacity.
css
.stub {
transition: opacity 1s linear;
opacity: 0;
}
.stub.triggered {
opacity: 1;
}
javascript:
const options = {
root: null, // The document viewport (default)
rootMargin: '0px', // No offset from the root element (default)
threshold: 1.0, // Full intersection into the root element
};
const obs = new IntersectionObserver( elms => {
elms.forEach( curr => {
if(curr.intersectionRatio < options.threshold) {
curr.target.classList.remove('triggered')
} else {
curr.target.classList.add('triggered')
}
})
}, options)
Array.from(document.querySelectorAll('.stub')).forEach(obs.observe.bind(obs))
As you can see on the MDN page, there is a Internet Explorer polyfill if needed https://github.com/w3c/IntersectionObserver
I have a table and I would like to change a class on the td by clicking them. When I addClass() each cell changes but it seems override any class.
My desired result for each cell is like this:
How can I achieve this by adding a class to them?
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
background-color: aqua;
}
.outpatient {
background-color: yellow;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
To achieve this can create another element inside each td. The td will be used to display the square with the teal background. The inner element is necessary to show the circle with the yellow background. By default the circle can be hidden, and then displayed when the class is added to the parent td. Try this:
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
overflow: hidden;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
cursor: pointer;
background-color: aqua;
padding: 0;
margin: 0;
position: relative;
}
td div {
width: 32px;
height: 32px;
border: 1px solid transparent;
line-height: 32px;
margin: -1px;
box-sizing: border-box;
}
td.outpatient div {
background-color: yellow;
border-radius: 50%;
border-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
<td><div>5</div></td>
<td><div>6</div></td>
</tr>
<tr>
<td><div>7</div></td>
<td><div>8</div></td>
<td><div>9</div></td>
</tr>
</table>
You can consider background-image with radial-gradient to create the circle above the background-color
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 15px;
cursor: pointer;
background-color:aqua;
}
.outpatient {
background-image:
radial-gradient(farthest-side,yellow calc(100% - 3px),#000 calc(100% - 2px),transparent 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
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.
Here is my JSfiddle with the table environment: http://jsfiddle.net/pY66Q/
I am having trouble understanding how I can write my JavaScript in such a way that when the element with the given class name of "pmap-program-name-label" is clicked, the click handler runs an expression that will only slideToggle the second child of the that contains the that was clicked. I hope that makes sense.
My HTML:
<table class="pmap-font-clr-drk-grey">
<thead>
<tr>
<th>Audit Program Results</th>
<th>Open</th>
<th>Closed</th>
<th>Overdue</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="pmap-parent-row-odd">
<td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&S Audits - USF Sites</span></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2011 EH&S Audits - USF Sites</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr class="pmap-parent-row-even">
<td class="pmap-program-name-label"><div class="fa fa-plus-circle fa-lg"></div><span>2011 EH&S Audits - USF Sites</span></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2011 EH&S Audits - USF Sites</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
</tfoot>
My CSS:
table {
width: 100%;
border: 1px #eaeaea solid;
}
th {
width: 10%;
text-align: center;
border-bottom: 4px #007290 solid;
padding: 5px 0;
}
th:first-child {
width: 60%;
text-align: left;
border-bottom: 4px #007290 solid;
padding: 5px 0 5px 20px;
font-family: 'Segoe UI Bold' sans-serif;
font-weight: normal;
}
tr:nth-child(2) {
display: none;
}
td {
width: 10%;
text-align: center;
border-bottom: 1px #eaeaea solid;
border-left: 1px #eaeaea solid;
padding: 0;
line-height: 30px;
}
td:first-child {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding-left: 38px;
}
td.pmap-program-name-label {
width: 60%;
text-align: left;
border-bottom: 1px #eaeaea solid;
padding: 2px 0 0 10px;
color: #007290;
font-weight: bold;
cursor: pointer;
}
td.pmap-program-name-label span {
padding-left: 10px;
}
tr.pmap-parent-row-odd {
background-color:#FFFFFF;
}
tr.pmap-parent-row-even {
background-color: #F3F4F5;
}
td a {
text-decoration: none;
color: #007290;
font-weight: bold;
}
My JavaScript/jQuery:
$(document).ready(function () {
/*
================================================
Toggles Form Parent/Children Data Fields
================================================
*/
var sectionAnimating = false;
$('.pmap-program-name-label').click(function () {
if (sectionAnimating == false) {
$("tbody").find('tr:nth-child(2)').slideToggle(450, function () {
sectionAnimating = false;
});
sectionAnimating = true;
}
});
});
Here u have code
(document).ready(function () {
/*
================================================
Toggles Form Parent/Children Data Fields
================================================
*/
var sectionAnimating = false;
$('.pmap-program-name-label').click(function () {
if (sectionAnimating == false) {
console.log(this.parentNode.parentNode)
$(this.parentNode.parentNode).find('tr:nth-child(2)').slideToggle(450, function () {
sectionAnimating = false;
});
sectionAnimating = true;
}
});
});