jQuery scan table th's for * and give parent a color!

Question

hey guys, i have a rather (for me) complicated task with jquery.

i want to scan an entire table for its th elements. if a th element has a ATERISK (*) in it, i want to hightlight the the parent, which is the tr element.

i know it sounds complicated when i explain it :)

so imagine i have a dynamic html table where i want to enable a feature to higlight certain rows. therefore i just want to put some symbol (in my case an Aterisk *) to some text inside of a table cell. if jquery detects a aterisk inside of th it should automtically give its parent() a classname!

a start would be probably an each function:

$(function() {
    $("table tr th").each(function() {
        $(this).parent().addClass("special");            
    });
});

but i have no idea how to scan for the aterisk!?

thank you for your help!

Answer 1

This could help:

$(function() {
    $("table tr th").each(function() {
        if ($(this).text().indexOf('*') > -1)            
            $(this).closest('tr').addClass("special");            
    });
});

EDIT: You'd probably want the th itself to have a special class as in the demo here

Answer 2

Here's a simpler way:

$("table tr th:contains('*')").parent().addClass("special");

Example at jsfiddle.

Edit from reading OP's comment:

In order to remove the asterisk, you'll need to iterate over the found elements:

$("table tr th:contains('*')").each(function(){
  var $This=$(this);

  $This.parent().addClass("special"); /* Add the "special" class */
  $This.text($This.text().replace("*","")); /* Remove the asterisk */
});

Example with asterisk removal.