首页 > 解决方案 > 表 td 颜色不变

问题描述

我正在尝试更改此处第一个td包含Test1单词的颜色可以更改颜色。但是当我test1在这里编码时不会改变颜色。有没有办法包含小写或大写的单词?

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

标签: javascriptjquery

解决方案


您可以filter使用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>


推荐阅读