Add classes dynamically to the table based on the variable value

Question

I am trying to color code my table using bootstrap. The table implements four different classes for showing the booking status which is retrieved from the database using ajax. I am appending the table rows dynamically to the table. I want my rows to change color based on the 'status' value retrieved from the database.

If it is "Waiting" it has to add "warning" class to the row, if it is "Confirmed" it should add "info", if it is "success" it has to add "success"and finally it has to add "danger" for cancelled bookings.

I have done the the part for cancel Booking which changes the row color to red when the user clicks cancel button. But i want to add these classes to appended to the current rows when i am populating the table data... Pls help.Thanks in advance...

$("#searchMobile").keyup(function(){
    if( $("#searchMobile").val().length == 10 ) {
        console.log("Entering searchMobile....");
        $.ajax({
            url: "/customerDetails",
            dataType: "json",
            data: {mobileNumber: $("#searchMobile").val()},
            success: function(response) {
                    var name,id,address;
                    console.log(response);


for ( var i = 0; i < response.length; i++ ) {
    name = response[i].nameBooking;
    id = response[i].customerId;
    address = response[i].pickuplocation;
    status = response[i].status;
    console.log("Iterating : " + i + " status: " + status);

    var $line = $( "<tr class='appendedRow tblrow'></tr>" );
    $line.append( $( "<td class='tblnumber'></td>" ).html( i + 1 ) );
    $line.append( $( "<td class='tbldate'></td>" ).html( response[i].date ) );
    $line.append( $( "<td class='tblbookingId'></td>" ).html( response[i].bookingId ) );
    $line.append( $( "<td class='tbldatepicker'></td>" ).html( response[i].datepicker ) );
    $line.append( $( "<td class='tblpickuploc'></td>" ).html( response[i].pickuplocation ) );
    $line.append( $( "<td class='tbldroploc'></td>" ).html( response[i].droplocation ) );
    $line.append( $( "<td id = 'tblstatus'></td>" ).html( response[i].status ) );
    $line.append( $( "<td class='tblcabtype'></td>" ).html( response[i].cabType ) );
    $line.append( $( "<td class='tblcabfare'></td>" ).html( response[i].cabFare ) );
    $line.append( $( "<td><button class='details'>Details</button></td>" ) );
    $line.append( $( "<td><button class='cancelBooking'>Cancel</button></td>" ) );
    $('#searchTableAppend').append($line);

    }           
});

For Cancel Booking

function loadcancel() {
$(".cancelBooking").click(function() {
    alert("Booking Cancelled...");
    $(this).closest("tr").addClass("danger");
});
}

In the for loop for the first 'tr' , i will check the value of the status, and based on the value I have to add the bootstrap class to that row only. For the second row it can have different bootstrap class based on the status and should not overwrite the added class of the first row...

Answer 1

You can check for status with in your for loop and add class accordingly

for ( var i = 0; i < response.length; i++ ) {
    name = response[i].nameBooking;
    id = response[i].customerId;
    address = response[i].pickuplocation;
    status = response[i].status;
    console.log("Iterating : " + i + " status: " + status);


      var myClass ="";

    if(status=="waiting")
     {
        myClass="warning"; 

     }
    if(status=="confirmed")
     {
        myClass="info"; 

     }
    if(status=="success")
     {
        myClass="success"; 

     }


    var $line = $( "<tr class='appendedRow tblrow'+myClass+'></tr>" );
    $line.append( $( "<td class='tblnumber'></td>" ).html( i + 1 ) );
    $line.append( $( "<td class='tbldate'></td>" ).html( response[i].date ) );
    $line.append( $( "<td class='tblbookingId'></td>" ).html( response[i].bookingId ) );
    $line.append( $( "<td class='tbldatepicker'></td>" ).html( response[i].datepicker ) );
    $line.append( $( "<td class='tblpickuploc'></td>" ).html( response[i].pickuplocation ) );
    $line.append( $( "<td class='tbldroploc'></td>" ).html( response[i].droplocation ) );
    $line.append( $( "<td id = 'tblstatus'></td>" ).html( response[i].status ) );
    $line.append( $( "<td class='tblcabtype'></td>" ).html( response[i].cabType ) );
    $line.append( $( "<td class='tblcabfare'></td>" ).html( response[i].cabFare ) );
    $line.append( $( "<td><button class='details'>Details</button></td>" ) );
    $line.append( $( "<td><button class='cancelBooking'>Cancel</button></td>" ) );
    $('#searchTableAppend').append($line);

    }    

Answer 2

You can use a status map and do something like

$("#searchMobile").keyup(function () {
    if ($("#searchMobile").val().length == 10) {
        console.log("Entering searchMobile....");
        $.ajax({
            url: "/customerDetails",
            dataType: "json",
            data: {
                mobileNumber: $("#searchMobile").val()
            },
            success: function (response) {
                var name, id, address,
                //it is a mapping  between class and status
                statusClass = {
                    Waiting: 'warning',
                    Confirmed: 'info',
                    success: 'success',
                    cancelled: 'danger'
                }
                console.log(response);
                for (var i = 0; i < response.length; i++) {
                    name = response[i].nameBooking;
                    id = response[i].customerId;
                    address = response[i].pickuplocation;
                    status = response[i].status;
                    console.log("Iterating : " + i + " status: " + status);

                    var $line = $("<tr class='appendedRow tblrow'></tr>").addClass(statusClass[response[i].status]);
                    $line.append($("<td class='tblnumber'></td>").html(i + 1));
                    $line.append($("<td class='tbldate'></td>").html(response[i].date));
                    $line.append($("<td class='tblbookingId'></td>").html(response[i].bookingId));
                    $line.append($("<td class='tbldatepicker'></td>").html(response[i].datepicker));
                    $line.append($("<td class='tblpickuploc'></td>").html(response[i].pickuplocation));
                    $line.append($("<td class='tbldroploc'></td>").html(response[i].droplocation));
                    $line.append($("<td id = 'tblstatus'></td>").html(response[i].status));
                    $line.append($("<td class='tblcabtype'></td>").html(response[i].cabType));
                    $line.append($("<td class='tblcabfare'></td>").html(response[i].cabFare));
                    $line.append($("<td><button class='details'>Details</button></td>"));
                    $line.append($("<td><button class='cancelBooking'>Cancel</button></td>"));
                    $('#searchTableAppend').append($line);

                }
            });