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>

Could you provide the html you use ? or adding on https://jsfiddle.net/? — Hesham Hassan, Apr 08 '16 at 13:06
Possible duplicate of [Change colour of table cells depending on value](http://stackoverflow.com/questions/18992382/change-colour-of-table-cells-depending-on-value) — Pavel Gatnar, Apr 08 '16 at 13:17
I have added a section of the html where I am getting the data from. — ash, Apr 08 '16 at 13:29

KiiroSora09 · Accepted Answer · 2016-04-08T14:08:42.923

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>

Thank you for your reply, it is colouring the full table red, instead on the particular variables which has 1,2 or 3? any idea in why this would be? — ash, Apr 08 '16 at 13:23
Which element would have the ".active" class? I cannot find it on the html you provided, also can you include the table element in the html. — KiiroSora09, Apr 08 '16 at 13:49
".active", is the class which depends on which ahref is clicked on, then that tab becomes active to then get the id and content within that active div tag. It is set in my list at the beginning of the html section. Yes i will include the table element now. Thank you for your help — ash, Apr 08 '16 at 13:59
It is now working and changing the color of the row according to the value, however it is only displaying the first row, where i need to display them all? any ideas? — ash, Apr 08 '16 at 14:11
I'm not sure, since it's already working fine on my example. Have you checked if the output spans is similar to the format in my demo? — KiiroSora09, Apr 08 '16 at 14:25
It was a simple mistake with my tags, Thank you so much for your help. I have got it working. — ash, Apr 10 '16 at 14:39

Colouring cells depending on what value is in the cell

1 Answers1