Table td color is not changing

Question

I am trying to change color where first td contain Test1 word in here able to change color. But When I put test1 on coding here not changing color. Is there any way whether contain word in small or capital?

 $("#X td:contains('Test1')").parents('tr').find("td:first").css("background-color", "red");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="X"> <tr> <td>Test1</td> <td>Test2</td> <td>Test3</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </table>

Answer 1

You can use filter with regex .

 // $("#X td:contains('/test1/i')").parents('tr').find("td:first").css("background-color", "red"); const matchTEST = /test/i; $('#X td').filter((i, e) => matchTEST.test(e.innerText)).parent('tr').find("td:first").css("background-color", "red");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id = "X"> <tr > <td>matchTEST</td> <td>Test2</td> <td>Test3</td> </tr> <tr > <td>a</td> <td>a</td> <td>a</td> </tr> <tr > <td>matchTEST</td> <td>c</td> <td>c</td> </tr> </table>

Answer 2

You can use this selector combine :contains and :first

$("#X td:contains(Test1):first, #X td:contains(test1):first").css('color','red');

 $("#X td:contains(Test1):first, #X td:contains(test1):first").css('color','red');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id = "X"> <tr > <td>test1</td> <td>Test2</td> <td>Test3</td> </tr> <tr > <td></td> <td></td> <td></td> </tr> <tr > <td>a</td> <td>b</td> <td>c</td> </tr> </table>

`

Answer 3

You can filter the elements with a javascript function that uses a case-insensitive regex

 var re = /test1/i; $("#X td") .filter((i, el) => re.test(el.innerHTML)) //.parents('tr').find("td:first") .css("background-color", "red");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="X"> <tr> <td>nope</td> <td>test1</td> <td>Test1</td> <td>test2</td> <td>protest1</td> </tr> </table>

Answer 4

you can override jQuery contain to make it Case-Insensitive :

 $.expr[":"].contains = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; }); $("#X td:contains('Test3')") .parents('tr') .find("td:first") .css("background-color", "red");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="X"> <tr> <td>test1</td> <td>test2</td> <td>test3</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </table>