Find all cells within a specific column and change color on certain characters

Question

User-1885804455 posted

I need to perform the following on my table:

1. Find a specific column by it's name or class (<th class="colName header" scope="col">ColName</th>)
2. Within that column I need to find all the cells containing "1"
3. The cell could contain a string like "1, 2, 3", and then I need to set the color red only on "1".

How can I do this with JQuery?

Answer 1

User61956409 posted

Hi Ptolemy,

Find a specific column by it's name or class (<th class="colName header" scope="col">ColName</th>)

You could try to use $("th.colName") to find the header cell, and you could use $(".colName") to find the specific column with “colName” CSS class.

Within that column I need to find all the cells containing "1"

You could use $("th,td:contains('1')") to find the table cells that contain “1”. For more information about :contains() Selector, please refer to this link.

https://api.jquery.com/contains-selector/

The cell could contain a string like "1, 2, 3", and then I need to set the color red only on "1".

You could use .css("background-color", "red") to change the background color of element.

Best Regards,

Fei Han

Answer 2

User-1768369891 posted

Try this

  

-- JS part
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>


<script>
$(document).ready(function(){
  $("#fooBar tr td").each(function(){
       if($(this).text() == "1")
       {
          $(this).css("color","red");
       }
       
  });
});

</script>

--Html part--

			<table id="fooBar" border="0">
			<tr>
			<th>Text</th><th>Text</th><th>Text</th><th></th>
			</tr>
			<tr class="">
			<td>1</td>
			<td>2</td>
			<td>3 </td>
			<td>1 </td>
		
		
			</tr>
			<tr>
			<td>2</td>
			<td>3</td>
			<td>1</td>
			<td>2</td>
			
			
			</tr>
      <tr>
			<td>2</td>
			<td>3</td>
			<td>1</td>
			<td>2</td>
			<td> </td>
			
		
			</tr>
			<tr>
			<td>2</td>
			<td>3</td>
			<td>1</td>
			<td>2</td>
		
		
			</tr>
			</table>

Answer 3

User-1885804455 posted

The above sample works if I only have "1" in a cell, but if I have "1, 2, 3" it doesn't work. This is what I'm trying to achieve:

Answer 4

User-1768369891 posted

It is also simple with change script 

<script>
$(document).ready(function(){
  $("#fooBar tr td").each(function(){
       
       var spantext = $(this).text();
       spantext = spantext.replace('1','<span style="color:red;">1</span>');             
       $(this).html(spantext);
  });
});

</script>

Answer 5

User61956409 posted

Hi Ptolemy,

The above sample works if I only have "1" in a cell, but if I have "1, 2, 3" it doesn't work.

As I mentioned before, you could use :contains() selector to find all elements that contain the specified text.

Best Regards,

Fei Han

Answer 6

User-1885804455 posted

navneetmitawa

It is also simple with change script 

<script>
$(document).ready(function(){
  $("#fooBar tr td").each(function(){
       
       var spantext = $(this).text();
       spantext = spantext.replace('1','<span style="color:red;">1</span>');             
       $(this).html(spantext);
  });
});

</script>

OK thanks, that kind of works, but I only want this for one column, which is the second column. As for now everything that contains "1" gets the span tag, including drop down list I assume since it stopped working.

So how can I process just one column?

The sample image showing first column, but it actually the second I want to process.

Answer 7

User-1885804455 posted

Fei Han - MSFT

Hi Ptolemy,

Ptolemy

The above sample works if I only have "1" in a cell, but if I have "1, 2, 3" it doesn't work.

As I mentioned before, you could use :contains() selector to find all elements that contain the specified text.

Best Regards,

Fei Han

Yes, I know, but I also needed to add span tags to every occurense of "1" (in a column).

Answer 8

User-1768369891 posted

Hi 

Ptolemy 

It is also quite simple with select only first child in a row and you have to learn about JQuery selector.

https://api.jquery.com/first-child-selector/

<script>
$(document).ready(function(){
  $("#fooBar tr td:first-child").each(function(){
       
       var spantext = $(this).text();
       spantext = spantext.replace('1','<span style="color:red;">1</span>');             
       $(this).html(spantext);
  });
});

</script>