How to change the color of each instance of a word in an html table with css?

Question

I have the following table in html using AngularJS:

<table id="searchTable">
    <thead>
        <tr>
            <th>Index</th>
            <th>Observation</th>
            <th>Reported By</th>
            <th>Verified By</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="observation in observations| filter:searchText">
            <th> {{$index + 1}} </th>
            <th>{{observation.clinicalType}}</th>
            <th>{{observation.reportedBy}}</th>
            <th>{{observation.verifiedBy}}</th>
            <th>{{observation.reportedDate}}</th>
        </tr>
    </tbody>
</table>

In the columns "Observations", "Reported By", "Verified By", and "Date", it is possible to have the string "NULL". I was wondering if there is a quick and easy way in CSS to color each instance of "NULL" in red in all of the four columns? I've been stuck there for quite some time.

Sorry everyone, I finally found a solution: stackoverflow.com/questions/18745001/… — Johnathan
– Johnathan, Commented Sep 15, 2016 at 18:41

Community · Accepted Answer · 2017-05-23 12:19:25Z

1

Personally I'd suggest doing this in Jquery. You could look for all <th> elements that contain "NULL" and change them to red by doing the following...

$(document).ready(function() {

   $("th:contains('NULL')").css("color", "red");

});

JSFiddle: https://jsfiddle.net/97oqnuyx/

EDIT: Because you've graciously accepted my answer, however it actually doesn't seem to solve the issue in your specific case, I feel I should make sure that I'm not spreading misinformation in the event people find this.

While my answer above will work in many cases, this is probably not the way to go if you're using Angular. In that event, you're looking for a solution more like this one, which OP linked to in a comment above.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Sep 15, 2016 at 18:12

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Johnathan Over a year ago

Hi! I tried this, but it's not working. "NULL" appears when I use data-ng-repeat from Angular. Hence, "NULL" is not already loaded in the DOM when the document loads, no? Or perhaps I am making a big mistake. Thank you for your help!

Tyler Roper Over a year ago

Hm, quite honestly I'm not proficient in Angular but I understand the concern. Just to confirm, there aren't any console errors, correct? Try changing $(document).ready to $(window).load, or perhaps there's some sort of Angular callback to capture a "data load" event? Sorry!

Darren Wainwright Over a year ago

Using Angular and you suggest JQuery? Why? Angular offers ng-style for just this.

Tyler Roper Over a year ago

@Darren I hadn't realized that it wouldn't work, however if you've noticed, I went back and edited my answer with a proper solution using Angular as well. Chill.

Collectives™ on Stack Overflow

How to change the color of each instance of a word in an html table with css?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related