Why does my jQuery slidedown not work in my table? - javascript

I'm trying to get the slider to work but it simply won't. It works when I'm not using a table but for my website I need a table where I can display the members. What's wrong with my code? The information has to below the name, not next to it.
<!DOCTYPE html>
<html>
<head>
<title>Bestuur</title>
<link rel="icon" href="images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel, #flip {
padding: 5px;
}
#panel {
display: none;
}
</style>
</head>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td><div id="flip">Pieter Schreurs</td>
<td>
<label for="pieter">Secretaris</label>
</div></td>
<td><div id="panel">Hidden information</div></td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>
</html>

I tidied up your markup - divs and tds closing incorrectly and moved the #panel. Is this what you're after?
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel,
#flip {
padding: 5px;
}
#panel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td width="200">
<div id="flip">Pieter Schreurs</div>
<div id="panel">Hidden information</div>
</td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>

There are a few tags that you never close. Fix those, then either move your #flip inside a td or remove that div and set the parent tr to have that ID.
I changed implementation so that "Functie" doesn't move.
Demo
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
th, td {
width: 150px;
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel, #flip {
padding: 5px;
}
#panel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr id="flip">
<td>Pieter Schreurs<div id="panel">Hidden information</div></td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>

Related

Expand/Collapse All Button for Table with accordion rows

I have created a table with accordion rows. I also have a button on the top to expand all accordions and collapse them again.
The accordions open and close individually perfectly, as well as when using the expand/collapse all button, they all expand and collapse perfectly. The problem comes in once I've used the expand/collapse all button I am unable to open individual accordions.
Only once the page is refreshed I am able to open them individually until I use the expand/collapse all button.
Any help would be appreciated.
I troubleshoot and debugged as much as possible and asked multiple people for assistance, but have been unsuccessful.
HTML:
<table class="fold-table">
<tbody>
<tr class="view">
<td>Organisational Hierarchy Maintenance</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<p>Define your strategic units and business units in a multi-level hierarchy</p>
</div>
</td>
</tr>
<tr class="view">
<td>Organisational Hierarchy Maintenance</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<p>Define your processes and business </p>
</div>
</td>
</tr>
</tbody>
</table>
jQuery:
$(function() {
$(".fold-table tr.view").on("click", function() {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
function expandCollapse() {
if ($(".fold").css('display') == 'none') {
$("#expand-collapse").html("Collapse All");
$(".fold").show("slow");
} else {
$("#expand-collapse").html("Expand All");
$(".fold").hide("slow");
}
}
Front end preview
You can see the live demo with arrows working http://jsfiddle.net/dreambold/q0tfp4yd/7/
Here's the working code.
$(function () {
$(".fold-table tr.view").on("click", function () {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
$("#expand-collapse").on("click", function () {
if ($(this).html() == "Expand All") {
$(".fold-table tr.view, .fold").addClass("open");
$(this).html("Collapse All");
} else {
$(".fold-table tr.view, .fold").removeClass("open");
$(this).html("Expand All");
}
});
.licensing-options-page-content h1 {
font-weight: bolder;
text-transform: uppercase;
margin: 0% 0% 3% 0%;
}
.licensing-options-page-content {
margin-top: 12%;
}
#media (min-width: 1920px) and (max-width: 2560px) {
.licensing-options-page-content {
margin-top: 8%;
}
}
/* Main Tabs */
.main-tabs-lo {
background-color: #f2f2f7;
color: black;
display: inline-block;
cursor: pointer;
padding: 10px;
font-size: 15px;
font-weight: 700;
width: 26%;
margin-bottom: 10px;
}
#media (min-width: 1920px) and (max-width: 2560px) {
.main-tabs-lo {
font-size: 21px;
width: 20%;
}
}
.top-tabs-lo {
margin-bottom: 30px;
}
.top-tabs-lo .main-tabs-lo {
color: #030700;
text-align: center;
background-color: #f2f2f7;
text-transform: uppercase;
margin-right: -4px;
border-right: 1px solid darkgray;
}
.tab-radio {
display: none;
}
/* Tabs behaviour, hidden if not checked/clicked */
.tab-content {
display: none;
}
.tab-radio:checked + .tab-content,
.tab-radio:checked + .sub-tab-content {
display: block;
}
.top-tabs-lo .loactive,
.label:hover {
background-color: black;
color: white;
}
/* Tabs Content */
.tab-content-lo {
padding: 0px;
}
.tab-content-lo,
.tab-content-container-lo h4 {
color: white;
}
/*.tab-content-container-lo {
/*width: calc(60% - (.5em + 6px));
min-height: 400px;
}*/
.licensing-options-content {
justify-content: center;
align-content: center;
margin-top: 5%;
}
/* Table + Accordion */
.mol:after {
content: " g/mol";
}
.cur:before {
content: "$";
}
.per:after {
content: "%";
}
* {
box-sizing: border-box;
}
table {
width: 100%;
background: #f2f2f7;
}
.tab-content-container-lo table {
margin: 0;
}
.tab-content-container-lo .tab-content {
padding: 0;
}
.tab-content-container-lo td {
border: none;
}
.tab-content-container-lo table th {
text-align: left;
border: none;
background-color: #000;
color: white;
}
table th,
table td {
padding: 0.4em;
}
/*.licensing-options-page-content table td {
background-color: #F2F2F7;
}*/
table.fold-table > tbody > tr.view td,
table.fold-table > tbody > tr.view th {
cursor: pointer;
}
table.fold-table > tbody > tr.view td:first-child,
table.fold-table > tbody > tr.view th:first-child {
position: relative;
padding-left: 20px;
font-family: "Montserrat", sans-serif;
}
table.fold-table > tbody > tr.view td:first-child:before,
table.fold-table > tbody > tr.view th:first-child:before {
position: absolute;
top: 50%;
left: 5px;
width: 9px;
height: 16px;
margin-top: -8px;
font: 16px fontawesome;
color: #999;
content: "\f0d7";
transition: all 0.3s ease;
}
table.fold-table > tbody > tr.view.open td:first-child:before,
table.fold-table > tbody > tr.view.open th:first-child:before {
position: absolute;
top: 50%;
left: 5px;
width: 9px;
height: 16px;
margin-top: -8px;
font: 16px fontawesome;
color: #999;
content: "\f0da";
transition: all 0.3s ease;
}
.fold-table h3 {
color: white;
margin: 0;
}
table.fold-table > tbody > tr.view:nth-child(4n-1) {
background: #e2e2e2;
}
table.fold-table > tbody > tr.view. td:first-child:before,
table.fold-table > tbody > tr.view.open th:first-child:before {
transform: rotate(-180deg);
color: #333;
}
table.fold-table > tbody > tr.fold {
display: none;
}
table.fold-table > tbody > tr.fold.open {
display: table-row;
}
.fold-content {
padding: 0.5em;
}
.fold-content h3 {
margin-top: 0;
}
.fold-content > table {
border: 2px solid #ccc;
}
.fold-content > table > tbody tr:nth-child(even) {
background: green !important;
}
.view img {
margin-left: 36%;
}
.lic-btn {
cursor: pointer;
background-color: #000;
color: white;
padding: 10px;
width: 12%;
text-align: center;
margin-bottom: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<table class="fold-table">
<tbody>
<tr class="view">
<td>Organisational Hierarchy Maintenance</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<p>Define your strategic units and business units in a multi-level hierarchy</p>
</div>
</td>
</tr>
<tr class="view">
<td>Organisational Hierarchy Maintenance</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr class="fold">
<td colspan="7">
<div class="fold-content">
<p>Define your processes and business </p>
</div>
</td>
</tr>
</tbody>
</table>
<button id="expand-collapse">Expand All</button>

Click for Dropdown not working when generated in a loop

I have a table that is populated from a database with a dropdown menu that is populated along side the table which is generated from code in the php. Im tying to use javascript and css to make each drop down open on click but I cannot seem to get it to work. I've included the code below. I initilly had the script working but it only worked on the first instance of the dropdown. I reviewed a similar post to what Im looking to do but it was to no avail.
CSS
background-color: #04AA6D;
color: white;
padding: 5px;
font-size: 12px;
border: none;
text-transform: uppercase;
}
.yardDropbtn i{
font-size: 12px;
top: 1px;
position: relative;
}
.yardDropdown{
position: relative;
display: inline-block;
}
.yard-dropdown-content{
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.yard-dropdown-content a{
color: black;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.yard-dropdown-content a:hover {
background-color: #ddd;
}
.yardDropBtnCt {
display: none;
background-color: #f1f1f1;
color: black;
/*margin-left: 5px;*/
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
text-transform: uppercase;
font-size: 12px;
}
.yardDropBtnCt:hover {
background-color: #ddd;
}
.trackBtn{
display: none;
background-color: #f1f1f1;
color: black;
margin-left: 5px;
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
}
.trackBtn:hover{
background-color: #ddd;
}
/*.yard-dropdown-content:hover{
background-color: #ddd;
}*/
.show_yard_Dropdown .yard-dropdown-content {
display: block;
}
.show_yard_Dropdown .yardDropbtn {
background-color: #3e8e41;
}
JavaScript
var dropDownDivY = document.querySelector(".yardDropdown");
/*dropDownButton.addEventListener("click", function(){
dropDownDivY.classList.toggle('show_yard_Dropdown');
});*/
dropDownButton.forEach(btn => {
btn.onclick = function() {
dropDownDivY.style.display = "block";
}
});
HTML
<tr>
<td width='50px' class='yard8'>6400'</td>
<td width='100px' class='yard8 track'>Receiving 1</td>
<td width='150px' class='yard8'></td>
<td width='150px' class='yard8'>
<td width='250px' class='yard8 destination'></td>
<td width='100px'class='yard8 length'>3455'</td>
<td width='100px' class='yard8 weight'></td>
<td width='150px' class='yard8 status'></td>
<td class='yard8'>
<div class='progressContainer'>
<div class='progress' style='width:54%'>54%</div>
</div>
</td>
<td class='yard8 remarks'></td>
<td width='59px'>
<div class="yardDropdown">
<button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
<div class="yard-dropdown-content">Edit TrackAEI Populate</div>
</div>
</td>
</tr>
<form action="" method="POST"></form>
document.querySelector(".yardDropdown");
The querySelector method only returns the first element matching the selector, so it can never work for more than the first row.
You need to use querySelectorAll instead and then loop over all the elements found:
let dropDowns = document.querySelectorAll(".yardDropdown");
for (let i = 0; i < dropDowns.length; i++) {
let dropDown = dropDowns[i]
dropDown.addEventListener('click', function () {
// do something, you can use the `i` variable to know which row has been clicked if you need to
})
}

How to add animation to filter table

I have made a filter table using html css and java but not able to add animation to it. I want that on entering the search element the results should be shown after hitting enter and it should be animated... in my condition the search result are shown directly....
here is my code
CSS code
* {
box-sizing: border-box;
}
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 5px solid #ddd;
margin-bottom: 12px;
border-radius:20px;
}
#myTable {
border-collapse: collapse;
table-align: center;
width: 80%;
border: 5px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
Java script code
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
filter = filter.replace(/\s/g,'')
txtValue = txtValue.replace(/\s/g, '')
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
} }
}
}
html code
<html>
<head>
<link href="css/filter-table.css" rel="stylesheet">
<link href="css/hdr-ftr.css" rel="stylesheet">
</head>
<body class="body-wrapper">
<center>
<center><font size="200"><b>Filter table</b></font> <br><br> <br>
<i class="fa fa-search searchIcon"></i>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Search your product here">
</center>
<table id="myTable" align="center" border="5" width>
<tr class="header">
<th style="width:40%;">Column 1</th>
<th style="width:60%;">Column 2</th>
</tr>
<tr>
<td><center>
<br><b>India</b></a></center></td>
<td><br>
<dl>
<li>Search 1</li>
</dl> <br>
</td>
</tr>
<tr>
<td><center>
<br><b>America</b></a></center></td>
<td><br>
<dl>
<li>Search 2</li>
</dl> <br><br><br>
</td>
</tr>
<tr>
<td><center>
<br><b>Iran</b></a></center></td>
<td><br>
<dl>
<li>Search 3</li>
</dl> <br><br><br>
</td>
</tr>
</table>
<!--filter-table.js-->
<script src="js/filter-table.js"></script>
</body>
</html>
pls someone help me...
thanks in advance
Sorry for rewriting from scratch, feel free to ask any questions
const input = document.querySelector(`input[name="search"]`);
input.onkeyup = () => {
const search = input.value.toLowerCase();
const list = document.querySelectorAll(`section > article`);
list.forEach((article) => {
const title = article.querySelector(`div:first-child`).innerText.toLowerCase();
if (title.includes(search)) {
article.classList.remove(`hide`);
} else {
article.classList.add(`hide`);
}
});
};
main {
display: flex;
flex-direction: column;
align-items: center;
}
main>input {
width: 90%;
padding: 1vh;
margin-bottom: 2vh;
font-size: 3vh;
}
main>div {
display: grid;
place-items: center;
width: 100%;
height: 90%;
}
section {
border: 1px solid #000;
font-size: 2em;
width: 90%;
}
section>article {
display: flex;
border: 1px solid #000;
transition: all .2s;
height: 4vh;
font-size: 3vh;
}
section>article.hide {
height: 0;
border: none;
overflow: hidden;
}
section>article>div {
display: flex;
border: 1px solid #000;
width: 50%;
justify-content: space-evenly;
}
<body>
<main>
<input type="text" name="search" placeholder="Search.." />
<div>
<section>
<article>
<div>India</div>
<div>s1</div>
</article>
<article>
<div>America</div>
<div>s2</div>
</article>
<article>
<div>Iran</div>
<div>s3</div>
</article>
</section>
</div>
</main>
</body>

Select more than one option, and receive them in another php

I have a list of users, and here it's possible to select (Standart/Admin). But when I save my POST, sends all selected options, but I only want to send the changed ones, because I doesn't make sense to send them all. And when I send this, I need to have the ID attached to it, any suggestions on how to do this? the PrintAll(), is just something I was trying to do, but can't make it work..
function printAll() {
var str = "",
i;
for (i = 0; i < myForm.UpdateUsers.options.length; i++) {
if (myForm.UpdateUsers.options[i].selected) {
str = str + i + " ";
}
}
alert("Options selected are " + str);
}
.ChangeEngine
{
font-size: 10px;
text-decoration: none;
}
.content2 {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.content2 h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #e0e0e3;
color: #4a536e;
}
.content2 > p, .content2 > div {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
margin: 25px 0;
padding: 25px;
background-color: #fff;
}
.content2 > p table td, .content2 > div table td {
padding: 30px;
}
.content2 > p table td, .content2 > div table td {
font-weight: bold;
color: #4a536e;
padding-left: 165px;
}
.content2 > div p {
padding: 5px;
margin: 0 0 10px 0;
}
.content2 table {
border-collapse: collapse;
}
.content2 td {
border: 1px solid #ccc;
}
.content2 tr {
border: none;
border: 1px solid #ccc;
}
.content2 th {
border: 1px solid #ccc;
}
.content2 tr:nth-child(even) {background-color: #f2f2f2;}
<div id="EditUsers" class="content2">
<div>
<table>
<form name="myForm" action="UpdateUsers.php" method="post">
<tr>
<th>Username</th>
<th>Engine</th>
<th>Access</th>
<th>ID</th>
</tr>
<tr>
<td>
username
</td>
<td>
Engine
</td>
<td><select class="data" name="UpdateUsers" placeholder="UpdateUsers" id="UpdateUsers">
<option>Admin</option>
<option>Standart</option>
</select></td>
<td>
id
</td>
</tr>
<br>
<tr>
<td>
username
</td>
<td>
Engine
</td>
<td><select class="data" name="UpdateUsers" placeholder="UpdateUsers" id="UpdateUsers">
<option>Admin</option>
<option>Standart</option>
</select></td>
<td>
id
</td>
</tr>
</table>
<input type="submit" id="ChangeUsers" value="Save" class="btn btn-info ChangeEngine" />
<input type=submit value="Print All" class="btn btn-info ChangeEngine" onClick="printAll()">
<br><br>
</form>
</div>
</div>

Set class in HTML table, but not for the entire column

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.

Categories