Search code examples
jqueryhtmlcssjquery-mobilecordova

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_id").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


Solution

  • This might be a helpful line of code to set the background colour using jQuery..

    $("#table_list_id").css("background-color","YOUR COLOR")