Table td color is not changing

user_11450738 0
Viewed 78

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>

jquery javascript
4 Answers

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>

user_102663610

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>

`

user_49645690

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>

user_5354800

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>

user_106690100
Related