추가 데이터에 클래스 추가

Question

jQuery을 사용 중이며 websocket에서 들어오는 데이터가 있습니다. 데이터 상태는 수신 확인되고 열리고 닫힙니다.

것은 내가 지금 상태 자체에 따라 상태로, 녹색, 회색 또는 빨간색 배경 클래스를 추가하는 부트 스트랩을 사용하려는 테이블

$(".incident-row").append(
     "<tr><td>"+incident.data.id+"</td>" 
     +"<td>"+incident.data.state+"</td>" 
     +"<td>"+incident.data.brief+"</td>" 
     +'<td><button type="button" class="btn btn-primary btn-sm">View details</button></td>' 
     +"</tr>" 
     ); 

에 데이터를 추가하고있다. 클래스가 올바르게 붙어 있지만 기존 클래스를 새 클래스로 덮어 쓰고 있습니다. DOM

각 클래스가 if 문에서 영향을받은 행에 머물도록 어떻게 다시 작성할 수 있습니까? $의

if(incident.data.state === "OPEN"){ 
      $('.incident-row tr').addClass("table-danger"); 
     } 
     else if(incident.data.state === "ACKNOWLEDGED"){ 
      $('.incident-row tr').addClass("table-active"); 
     } 
     else if(incident.data.state === "CLOSED"){ 
      $('.incident-row tr').addClass("table-success"); 
     } 
     else{ 
      return; 
     } 

Answer 1

당신의 선택 ('. 사건 행 TR')는 모든 사건의 행을 선택하는 것입니다.

에는 선택자를 사용할 수 있습니다.

var stateClass = {"OPEN":"table-danger","ACKNOWLEDGED":"table-active","CLOSED":"table-success"}; 

$(".incident-row").append(
     "<tr class=\"" + stateClass[incident.data.state]+ "\"><td>"+incident.data.id+"</td>" 
     +"<td>"+incident.data.state+"</td>" 
     +"<td>"+incident.data.brief+"</td>" 
     +'<td><button type="button" class="btn btn-primary btn-sm">View details</button></td>' 
     +"</tr>" 
     ); 

:

$('.incident-row tr:contains("OPEN")').addClass("table-danger"); 
$('.incident-row tr:contains("ACKNOWLEDGED")').addClass("table-active"); 
$('.incident-row tr:contains("CLOSED")').addClass("table-success"); 

Answer 2

var className = ""; 
if (incident.data.state === "OPEN") { 
    className = "table-danger"; 
} else if (incident.data.state === "ACKNOWLEDGED") { 
    className = "table-active"; 
} else if (incident.data.state === "CLOSED") { 
    className = "table-success"; 
} else { 

} 

$(".incident-row").append(
     "<tr class=\"" + className + "\"><td>"+incident.data.id+"</td>" 
     +"<td>"+incident.data.state+"</td>" 
     +"<td>"+incident.data.brief+"</td>" 
     +'<td><button type="button" class="btn btn-primary btn-sm">View details</button></td>' 
     +"</tr>" 
     ); 

Answer 3

이 간단한 솔루션을보십시오