All geek questions in one place

Set class in HTML table, but not for entire column

Here is the situation, I have a file HTMLwith a table, the table is filled with data XML. The last column (10) got the number in it: 1, 2, 3, 4 or 5. I have 5 rows jQuerythat look for the number and give the cell with the corresponding number a specific class, this works fine (the cell has an opacity of 0%, because it should not be "shown", but for our products it works great).

Now the problem is that columns 7 and 8 should get this class without the whole column receiving it, but only a row with a specific number.

I have jsfiddle so you can see the code and stuff:

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 for testing only, the real xml will have the number 1, 2, 3, 4, 5 in 100 rows in random order.

EDIT: Got a picture of what it should look like:enter image 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>
Run codeHide result
+4
source share
2 answers

I think you are looking for a selector .siblings():

    $("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/

+5
source

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 many lines, and you do not need extra things, except for the added classes, this may be redundant. a selector .siblings()(as in this answer ) may be enough.

+4
source

Source: https://habr.com/ru/post/1690056/

More articles:


All Articles