Coloring Zellen je nachdem, welcher Wert ist in der Zelle

Question

Ich versuche, die Polarität Variable zu bekommen, und ändern Sie die Farbe dieser Zeile abhängig von dem Wert, zum Beispiel 1,2 und 3. Irgendwelche Ideen, wie ich tun könnte Dies. Ich habe das versucht, aber es funktioniert nicht. Vielen Dank.

Dies ist HTML, wo ich die Daten aus der Datenbank mit PHP, und eine Schaltfläche zum Anzeigen der Daten.

<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> 

Dies ist das Tabellenelement, in meinem 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

die unten arbeiten könnte (basierend auf meinem Verständnis Ihrer Frage)

bearbeiten
Hier Vielleicht ist ein funktionierendes Beispiel. Ich habe den > .active Teil des Selektors entfernt, da das Element, das die Klasse "active" hat, ebenfalls nicht in dem bereitgestellten HTML angegeben ist.

$("#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>