セル内の値に応じてセルを塗りつぶす

Question

極性変数を取得しようとしていますが、その値の値に応じて1,2または3などの色を変えようとしています。この。 これを試しましたが、動作していません。ありがとうございました。

$("#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')); 
    }); 
}); 

これはhtmlですが、ここではPHPを使用してデータベースからデータを取得し、データを表示するボタンを設定しています。

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

これは自分の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

は実施例です。セレクタの> .active部分を削除しました。これは、「アクティブ」クラスを持つ要素もHTMLで指定されていないためです。

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