Question

我正在尝试使用bootstrap对我的表进行颜色编码。该表实现了四个不同的类，用于显示使用ajax从数据库中检索的预订状态。我将表行动态地附加到表中。我希望我的行根据＆＃39;状态更改颜色。从数据库中检索的值。

如果是＆＃34;等待＆＃34;它必须添加＆＃34;警告＆＃34;如果是＆＃34;确认＆＃34;它应该添加＆＃34; info＆＃34;，如果它是＆＃34;成功＆＃34;它必须添加＆＃34;成功＆＃34;最后它必须添加＆＃34;危险＆＃34;取消预订。

我已完成取消预订的部分，当用户点击取消按钮时，会将行颜色更改为红色。但是我想在填充表数据时添加这些类以附加到当前行...请帮助。提前感谢...

$("#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);

    }           
});

取消预订

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

在第一个＆＃39; tr的for循环中，我将检查状态的值，并根据我必须将引导类添加到该行的值。对于第二行，它可以根据状态具有不同的引导类，不应该覆盖第一行的添加类......

Answer 1

您可以使用状态图并执行类似

的操作

$("#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);

                }
            });

Answer 2

您可以在for循环中检查状态并相应地添加课程

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

    }

根据变量值动态地向表中添加类

2 个答案: