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

is the status is something that can be "waiting","Confirmed"? — Ramzan Zafar
– Ramzan Zafar, Commented Nov 20, 2014 at 10:47
Yes...It is a string which i have set while booking the cab. It can be either "waiting", "confirmed", "success" or "cancelled". So i have to add classes to <tr> based on the status value.. — User_007
– User_007, Commented Nov 20, 2014 at 10:52

Arun P Johny · Accepted Answer · 2014-11-20 10:50:33Z

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

                }
            });

answered Nov 20, 2014 at 10:50

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

User_007 Over a year ago

Thanks for the reply. But how do i add the class to <tr>, like if status = "waiting" my <tr> has to be <tr class='appendedRow tblrow warning'></tr> dynamically?

Arun P Johny Over a year ago

@ShiyaamSundar the line var $line = $("<tr class='appendedRow tblrow'></tr>").addClass(statusClass[response[i].status]); should take care of that

Ramzan Zafar · Accepted Answer · 2014-11-20 10:57:27Z

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

    }

Collectives™ on Stack Overflow

Add classes dynamically to the table based on the variable value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related