how to bring background color dynamically

how to bring background color dynamically

I am making one android app with the help of PhoneGap. Please help me out
how i can bring background color dynamically
In HTML5:-
<div data-role="page">
<div data-role="content" >
<div class="my_body1">
<ul id="table_list_id"></ul>
</div>
</div>
</div>
In CSS3:-
.my_body1 ul li{
float:left;
list-style-type:none;
border:2px solid #a1a1a1;
padding:5px 5px;
text-align:center;
width:120px;
border-radius:5px;
margin:1%;
box-shadow: 5px 5px 5px #888888;
}
.my_body1 ul{
width:100%;
}
.my_body1 ul li a{
text-decoration: none;
color:#525252;
}
In jQuery:-
function callXMLConnection() {
$("#table_list_id").empty();
$.support.cors = true;
$.ajax({
type: "GET",
url: "table.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache:false,
processData:false,
crossDomain:true,
success: function (data) {
$(data).find('xyz').each(function(){
var title = $(this).find('title').text();
var status = $(this).find('status').text();
if(status == 'vacant'){
var scripts = "<li><a
href='#'>"+title+"</a></li>"
$(".table_list_class").append(scripts).trigger('create');
}
else if(status == 'occupied'){
var scripts = "<li><a href='#'
>"+title+"</a></li>"
$("#table_list_id").append(scripts).trigger('create');
}
});
}
});
}
$(document).unbind('pageinit').bind('pageinit', function () {
callXMLConnection();
});
I want the background color when the status is vacant then it should be
green and when status is occupied then it should be red .
Please help me out