변수 값을 기준으로 테이블에 동적으로 클래스 추가

Question

부트 스트랩을 사용하여 테이블에 색상 코드를 지정하려고합니다. 이 테이블은 ajax를 사용하여 데이터베이스에서 검색 한 예약 상태를 보여주는 네 가지 클래스를 구현합니다. 테이블에 테이블 행을 동적으로 추가하려고합니다. 데이터베이스에서 검색된 '상태'값을 기반으로 색상을 변경하는 행을 원합니다.

"대기 중"인 경우 "경고"클래스를 행에 추가해야합니다. "확인 됨"이면 "정보"를 추가해야하며, "성공"이면 "성공"을 추가해야하고 마지막으로 그것은 취소 된 예약에 대해 "위험"을 추가해야합니다.

사용자가 취소 버튼을 클릭 할 때 행 색상을 빨간색으로 변경하는 취소 예약 부분을 수행했습니다. 하지만 난에서 예약

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

을 내가 테이블 데이터를 채우는하고 때 사전에 help.Thanks를 Pls는 ... 현재 행에 추가에 ...

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

    }   
}); 

이러한 클래스를 추가에 대한 취소 할 첫 번째 '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); 

    }