Change Td Background Colour Based on the Value

change td background color based on the option value

You should use pseudo-class selector in order to get the selected text from your dropdown.

var text = $(this).find(':selected').text();

$(document).ready(function(){  $('td.tdcolor').change( function() {     $(this).css('background-color',$(this).find(':selected').text()); });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table border="1"><tr><th>Channel</th><th>Health</th></tr><tr><td>Mobile</td><td class="tdcolor">  <select >    <option value="0">Select</option>    <option value="1">Green</option>    <option value="2">Red</option>    <option value="3">Blue</option>  </select></td></tr></table>

Change background-color based on value in 3rd td

There's no need for parseInt since you're comparing strings:

$(document).ready(function(){
  $("tr td:nth-child(3)").map(function () {
    if ($(this).text() === 'FAIL') 
      $(this).css("background-color", "red");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>0</td>
      <td>1</td>
      <td>FAIL</td>
    </tr>
  </tbody>
</table>

changing <td> background color based on dynamic value, using javascript

You can try the below method to add background-color to the cells contains the status of system.

Add a class name to the cell while appending the same to DOM, and change the background-color using the same class name.

$(document).ready(function () {
  $.ajax({
    url: "http://localhost/api/job/",
    dataType: "JSON",
    success: function (data) {
      for (var i = 0; i < data.length; i++) {
        $(document).ready(function () {
          var content = "";
          data.forEach((item) => {
            var class_name = "";
            if (item.system_status.toLowerCase().indexOf("online") === 0) {
              class_name = "online";
            } else if (
              item.system_status.toLowerCase().indexOf("offline") === 0
            ) {
              class_name = "offline";
            } else if (item.system_status.toLowerCase().indexOf("down") === 0) {
              class_name = "down";
            }
            content +=
              "<tr><td class='" +
              class_name +
              "'>" +
              item.system_status +
              "</td></tr>";
          });

          $("#table_body").html(content);
        });
      }
    },
  });
});

table, td {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

td.online, td.offline, td.down {
  color: #fff;
}

td.online {
  background-color: green;
}

td.offline {
  background-color: orange;
}

td.down {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tbody id='table_body'></tbody>
</table>

Change the background color of a td element depending on his numeric value

You can loop through the table rows and apply css based on the criteria of table cell text == 0.

$("table td").map(function () {  if (parseInt($(this).text()) === 0) $(this).css("background-color", "green")})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><table> <tr>  <td class="tg-yw42">0</td>  <td class="tg-yw43">1</td>  <td class="tg-yw44">0</td> </tr></table>

Change table row background color based on td content

Traversing the DOM is basic Javascript - in your example, you'd check each <td> element for the content you're looking for. If you find it, grab its parent <tr> element and change the parent's background color.

const rows = document.querySelectorAll('td');
rows.forEach((row) => {
  if (row.innerHTML === '☐') {
    const parent = row.parentNode;
    parent.style.backgroundColor = 'red';
  }
});

<table>
  <colgroup>
    <col/>
    <col/>
  </colgroup>
  <tr>
    <th>#</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>☑</td>
    <td>piece-of-data</td>
  </tr>
  <tr>
    <td>☑</td>
    <td>piece-of-data-2</td>
  </tr>
  <tr>
    <td>☐</td>
    <td>piece-of-data-3</td>
  </tr>
  <tr>
    <td>☑</td>
    <td>piece-of-data-4</td>
  </tr>
</table>

How to change background colour of td in table based on their value in array

Before adding background color to td, you need to generate a random color for each array key. Here is the function to create colors array with key and values ( color code)

function getColors($array) {
        // init array
        $colors = array();
        // count of number of random colors to generate
        if(count($array)>0){
            // get the keys of passed array ( will be help full if the passed array is associative array )
            $array_keys = array_keys($array);
            $chars = "ABCDEF0123456789";
            $size = strlen($chars);
            foreach($array_keys as $value){
                for( $j = 0; $j < 6; $j++ ) {
                    // generate a random color for each key of passed array
                    $colors[$value] .= $chars[ rand( 0, $size - 1 ) ];
                }
            }
        }
        return $colors;
    }

Now add bgcolor for td.

<?php 
   // call the function to get random colors
    $colors = getColors($lista_slobodnih_plombi);?>

  <?php foreach($lista_slobodnih_plombi as $key=>$lista_sp): ?>
    <?php foreach($lista_sp as $lista): 

    ?>
    <tr>
      <td></td>
      <td class="align-center td_checkbox"><input type="checkbox"  name="link-cbx" class="checkItem" autocomplete="on" id="<?php echo $lista;?>" data-sb_plombe="<?php echo $lista;?>"/></td>
      <td class="sbr" bgcolor="<?php echo '#'.$colors[$key];?>"><?php echo $lista;?></td>

    </tr>

    <?php endforeach; ?>
  <?php endforeach; ?>

Note: background colors will change for every page load.

How can I change td background color depending on value in a table using JavaScript / jQuery?

Try,

$('#test [id^="available_"]').each(function(){

   var closestTd = $(this).closest('td');
   var valueCache = parseInt($(this).val());

   if(valueCache > 0) {
      closestTd .addClass('positive');
   }
   else if(valueCache < 0) {
      closestTd.addClass('negative');
   }
   else {
      //Apply any color as per your wish for value = 0;
   }

});

And define css rules for that classes,

.positive{  background-color : green; } 
.negative{  background-color : red; }