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

  • 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?

    Tuesday, March 1, 2016 11:46 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 2, 2016 2:27 AM
  • 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>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 5, 2016 4:51 AM

All replies

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 2, 2016 2:27 AM
  • 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>

    Wednesday, March 2, 2016 4:22 AM
  • 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:

    Table

    Thursday, March 3, 2016 9:22 PM
  • 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>
    Friday, March 4, 2016 7:20 AM
  • 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

    Friday, March 4, 2016 7:43 AM
  • 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.

    Friday, March 4, 2016 11:39 PM
  • 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).

    Friday, March 4, 2016 11:43 PM
  • 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>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 5, 2016 4:51 AM