How to Change Colour in CSS, by Giving Condition

css class to change a colour conditionally

Are you asking for this targeting ?

label.error { color: red ; }

changing font colour when a condition is met

You could simply add/remove a class instead of only changing the value.
This class can be referenced via CSS.

Example

.online_text {
    color: #00ff00;
}
.offline_text {
    color: #ff0000;
}

Your script should add/remove the property so you basically get this format:

<td ... class="online_text">Oliver Addison</td>

Adding the class as example:

document.getElementById("onoff").className += "online_text";

Using Jquery, how to change color with if/else condition

As you'll see in the snippet here, jQuery reports back the RGB value of the cell for it's background color. It's much easier to use classes for this kind of thing. in this case, you can just use toggleClass()

Also, for the record, your IF statement was malformed:

if ($('#box2').css({backgroundColor: 'white'})) {

should be

if ($('#box2').css('background-color') ==  'white') {

... but it would fail because it's actually rgb(255, 255, 255), not white

$(document).ready(function() {
  $("#box1").click(function() {
    console.log('The background color of box 2 is: ', $('#box2').css('background-color'))
    $("#box2").toggleClass('black');
  });
});

div {
  padding: 10px;
  display:inline-block;
  margin-right:10px;
  border: 1px solid #ccc;
  background-color: white;
}

.black {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box1"></div>
<div id="box2"></div>

i want to change the text color based on the condition

Why use a JS if you work with PHP? you can do with PHP too like

<span class="pendtext" style="font-size:15px;color:{{($duepay->status == 'issued')?'green':'yellow'}}">{{($duepay->status == 'issued') ? 'PENDING' : (($duepay->status == 'paid') ? 'SUCCESSFUL' : $duepay->status)}}</span>

Color html table based on 3 conditions

The conditional (ternary) operator can use for this goal. More info:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

The following code is using class and {{ }} then using ternary operator. if dict.status.includes('True') returns true then class is equal to color-green else if dict.status.includes('False') returns true then the class is equal to color-red and else class becomes color-yellow.

class = "{{ dict.status.includes('True') ? 'color-green' : dict.status.includes('False') ? 'color-red' : 'color-yellow' }}

.color-green {
    background-color: green;
    color: black;
  }

  .color-yellow {
    background-color: yellow;
    color: black;
  }
  
  .color-red {
    background-color: red;
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="">
    Type your text in this box: 
    <input type="text" ng-model="dict.status">
    <table>
        <tr>
            <td class = "{{ dict.status.includes('True') ? 'color-green' : dict.status.includes('False') ? 'color-red' : 'color-yellow' }}">{{ dict.status}}</td>
        </tr>
    </table>
</div>

Change text color using if/else in javascript

Please change the Below. It will work.

In java Script change the equal operator (=) to assignment operator (==) for condition check.
Change .value to .innerHTML for getting element content.
Correct the syntax error , close the missing parentheses after 'Warning'.

Check equal operator and .innerHTML in javascript docs.

Old Code:

if (document.getElementById('payment_status_cl').value = 'Submitted') {
    document.getElementById('payment_status_cl').style.color = "Green";
}

New Code :

if (document.getElementById('payment_status_cl').innerHTML == 'Submitted') { 
   document.getElementById('payment_status_cl').style.color = "Green";
}

function f_color() {

if (document.getElementById('payment_status_cl').innerHTML  == 'Submitted') { 
   document.getElementById('payment_status_cl').style.color = "Green";
}
else if (document.getElementById('payment_status_cl').innerHTML == 'Pending') {
   document.getElementById('payment_status_cl').style.color = "Orange";
}
else if (document.getElementById('payment_status_cl').innerHTML == 'Warning'){
   document.getElementById('payment_status_cl').style.color = "Yellow";
}
else if (document.getElementById('payment_status_cl').innerHTML == 'Overdue') {
   document.getElementById('payment_status_cl').style.color = "Red";
}
};

  f_color();

<html>
<body>
<h2>JavaScript</h2>
<table>
<tr><td id="payment_status_cl" style="text-align: center; height:25px">Submitted</td></tr>
</table> 
</body>
</html>

How to color html table in django based on condition

You could do a bunch of if/then/else in the html.

Here's your HTML:

<html>
<head>
  <style>
    .red {
      color: red;
    }

    .orange {
      color: orange !important;
    }

    .green {
      color: green;
    }
  </style>
</head>

<body>
<table>
  <tr>
    <th>A</th>
    {% for item in a %}
      {% if item > 50 %}
      <td class="green">{{ item }}</td>
      {% elif item > 40 %}
      <td class="orange">{{ item }}</td>
      {% elif item > 20 %}
      <td class="red">{{ item }}</td>
      {% else %}
      <td>{{ item }}</td>
      {% endif %}
    {% endfor %}
  </tr>
  <tr>
    <th>B</th>
    {% for item in b %}
      {% if item > 50 %}
      <td class="green">{{ item }}</td>
      {% elif item > 40 %}
      <td class="orange">{{ item }}</td>
      {% elif item > 20 %}
      <td class="red">{{ item }}</td>
      {% else %}
      <td>{{ item }}</td>
      {% endif %}
    {% endfor %}
  </tr>
</table>
</body>
</html>

And here's the view I created for context:

from django.views.generic import TemplateView

class View(TemplateView):
    template_name = 'view.html'

    def get_context_data(self, **kwargs):
        kwargs.update({
            'a': [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
            'b': [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        })
        return super().get_context_data(**kwargs)