Colouring cells depending on what value is in the cell

Question

I am trying to get the polarity variable, and change the color of that row depending on the value, for example, 1,2 and 3. Any ideas of how i could do this. I tried this, but it is not working. Thankyou.

$("#tableView").click(function(event){
    $('#empty').html('');
    $('#empty').show();
    $('.content').addClass('hide');
    var tweet;
    var i;
    $('#empty').append('<div><table><tr><th>Tweet</th><th>Polarity</th></tr></table></div>');

    $('.tab-content > .active span').each(function() {
        tweet = $(this).text().slice(0,-2);
        var polarity = $(this).find('.change').text();

           $('table').append('<tr><td>'+ tweet + '</td><td>'+ polarity + '</td></tr>');     
           if($('polarity:contains("1")').css('background-color', 'red'));   
    });
});

This is html where i am getting the data from database using PHP, and setting a button to show the data.

<div class="parliamentContainer">
 <h1>Parliament</h1>

 <ul class="nav nav-tabs">

 <li class="active"></li>
 <li><a data-toggle="tab" href="#bbc">BBC Parliament</a></li>
 <li><a data-toggle="tab" href="#minister">Ministers</a></li>
 <li><a data-toggle="tab" href="#law">Law</a></li>
 <li><a data-toggle="tab" href="#crime">Crime</a></li>
 <li><a data-toggle="tab" href="#seeAllPar">See All</a></li>

 </ul>
<div class="tab-content">
<button type="button" id="tableView"> Show in table form</button>

<div id= "empty"></div>

<div class="content tab-pane fade" id = "bbc"> 
<?php
$result = mysql_query("SELECT * FROM parliament WHERE tweet LIKE '%bbc%';",$db);
if (!$result) {
die("Database query failed: " . mysql_error());
}
while ($row = mysql_fetch_array($result)) {
echo "<span>".$row[0]. "<p class='change'>".$row[1]."</p> </span>";
}
?>
</div>

This is the table element, within my html.

<style>
 table, td, th {    
 border: 1px solid #ddd;
 text-align: left;
}

 table {
 border-collapse: collapse;
 width: 40%;
}

 th, td {
 padding: 10px;
}


  </style>

Answer 1

Maybe the below could work (based on my understanding of your question)

Edit
Here is a working example. I removed the > .active part of the selector since the element that will have the "active" class is also not specified in the HTML provided.

$("#tableView").click(function(event) {
  $('#empty').html('');
  $('#empty').show();
  $('.content').addClass('hide');
  var tweet;
  var i;
  $('#empty').append('<div><table><tr><th>Tweet</th><th>Polarity</th></tr></table></div>');
  $('.tab-content span').each(function() {
    tweet = $(this).text().slice(0, -2);
    var polarity = $(this).find('.change').text();

    // Save jQuery object in a variable
    var $row = $('<tr><td>' + tweet + '</td><td>' + polarity + '</td></tr>');

    // Update the jQuery object's color based on the 'polarity' variable
    if (polarity == '1') {
      $row.css('background-color', 'red');
    }
    // Other sample colors
    if (polarity == '2') {
      $row.css('background-color', 'blue');
    }
    if (polarity == '3') {
      $row.css('background-color', 'green');
    }

    // Append the jQuery object
    $('table').append($row);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parliamentContainer">
  <h1>Parliament</h1>

  <ul class="nav nav-tabs">

    <li class="active"></li>
    <li><a data-toggle="tab" href="#bbc">BBC Parliament</a></li>
    <li><a data-toggle="tab" href="#minister">Ministers</a></li>
    <li><a data-toggle="tab" href="#law">Law</a></li>
    <li><a data-toggle="tab" href="#crime">Crime</a></li>
    <li><a data-toggle="tab" href="#seeAllPar">See All</a></li>

  </ul>
  <div class="tab-content">
    <button type="button" id="tableView"> Show in table form</button>

    <div id="empty"></div>

    <div class="content tab-pane fade" id="bbc">
      <span>test<p class='change'>1</p> </span>
      <span>test<p class='change'>2</p> </span>
      <span>test<p class='change'>1</p> </span>
      <span>test<p class='change'>3</p> </span>
    </div>
  </div>
</div>

<table>
</table>