1

I am trying to highlight a table row if it has a tick (check mark) in one of the td’s. I am using the jQuery code below, but it will not find a td with a html symbol such as a tick (check mark). It makes no difference if I use .text() or .html(). The code works as expected if I use any other criteria such as text or numbers, but not with html symbols. Is there away round this?

$('#farm td').filter(
  function(t) {
    if ($(this).text() == "✓") {
      $(this).closest('tr').css('background-color', 'Yellow');
      return;
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="farm" border="1">
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>Cat</td>
    <td>Duck</td>
  </tr>
  <tr>
    <td>Pig</td>
    <td>&#x2715;</td>
  </tr>
  <tr>
    <td>&#10003;</td>
    <td>Bull</td>
  </tr>
  <tr>
    <td>8</td>
    <td>10</td>
  </tr>
</table>
isherwood
  • 58,414
  • 16
  • 114
  • 157

1 Answers1

2

You just need to check for the actual character (✓). jQuery acts on rendered HTML, not markup. I determined this by setting a breakpoint on the line with text() in it and looking at the values that came through.

Also:

  • .each() makes more sense to me here
  • no need to return anything in the function
  • no need to pass in anything (t)
  • console logs are far nicer than alerts for debugging

$('#farm td').each(function() {
  if ($(this).text() == "✓") {
    $(this).closest('tr').css('background-color', 'Yellow');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="farm" border="1">
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>Cat</td>
    <td>Duck</td>
  </tr>
  <tr>
    <td>Pig</td>
    <td>&#x2715;</td>
  </tr>
  <tr>
    <td>&#10003;</td>
    <td>Bull</td>
  </tr>
  <tr>
    <td>8</td>
    <td>10</td>
  </tr>
</table>

Mohamed-Yousef suggested a great refinement using an internal selector:

$('#farm td:contains("✓")').closest('tr').css('background-color', 'Yellow');

It's a slightly different selector as it would also match ✓ blah, for example, but maybe it's useful in your case.

https://api.jquery.com/contains-selector/

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • If I wanted to effect only one column, say only column one, while the other columns with check marks are ignored what’s the best way to achieve that? I thought if I amended the code to $('#farm td:eq(0)'). However, it only appears to look at the first cell in the first row, not all the cells in that row and not all the rows in that column. Or should I ask another question? –  Aug 27 '21 at 16:13
  • 1
    https://stackoverflow.com/questions/4996002/get-index-of-element-as-child-relative-to-parent/4996037 – isherwood Aug 27 '21 at 16:27
  • thanks for your input, I found this added to you code worked for me, just in case it can help someone else: columnTh = $("#farm th:contains('Three')"); columnIndex = columnTh.index() + 1; $('#farm tr td:nth-child(' + columnIndex + ')') By Tristan Found here: https://stackoverflow.com/questions/8375625/how-to-select-a-table-column-with-jquery/14712238 –  Aug 28 '21 at 16:59