Johnathan Johnathan - 1 month ago 5x
AngularJS Question

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

I have the following table in html using AngularJS:

<table id="searchTable">
<th>Reported By</th>
<th>Verified By</th>
<tr data-ng-repeat="observation in observations| filter:searchText">
<th> {{$index + 1}} </th>

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.


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");



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.