根據單元格中的值着色單元格

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>