Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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: enter image description here

$("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&#9660;</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 &bull; 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>
like image 384
Twanekkel Avatar asked Dec 18 '22 02:12

Twanekkel


1 Answers

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/

like image 192
McVenco Avatar answered Jan 01 '23 14:01

McVenco