jQuery 根据该行中两个单元格的值更改 table 行的背景

Question

我有一个 tampermonkey 脚本，它在特定列包含特定文本时突出显示 table 行。

例如，下面的代码成功突出显示了第 1 列包含 'M' 的行和第 3 列包含 'P'.

的行

$("td:nth-of-type(1):contains('M')").parent().css("background-color","#ccccff");
$("td:nth-of-type(3):contains('P')").parent().css("background-color","#ccccff");

仅当第 1 列包含 'P' 且第 3 列包含 'M' 时，如何使用 AND 运算符或 IF 语句突出显示行？

Answer 1

获取所有 <tr> 元素并将其筛选为具有符合您要求的 <td> 元素的元素。

获得过滤后的集合后，设置背景颜色。

const MATCH = [{
  col: 0,
  chr: "M"
}, {
  col: 2,
  chr: "P"
}]

$("tr").filter((_, tr) => {
  // get the <td> children
  const cells = $(tr).children("td")
  // Ensure each MATCH appears in each cell respectively
  return MATCH.every(({ col, chr }) => cells.eq(col).text().includes(chr))  
}).css("background-color", "#ccf")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<table border="1">
  <tr>
    <td>No capital "m" here</td>
    <td>foo</td>
    <td>No capital "p" here</td>
  </tr>
  <tr>
    <td>Mo Money</td>
    <td>bar</td>
    <td>Mo Problems</td>
  </tr>
  <tr>
    <td>Pass the</td>
    <td>baz</td>
    <td>Mayo please</td>
  </tr>
</table>

jQuery 根据该行中两个单元格的值更改 table 行的背景

jQuery to change background on table row based on values of two cells within that row

javascript

jquery

html-table

userscripts

tampermonkey