switching classes

by I Sang Hyeon

HTML

<table class="tb_01">
  <colgroup>
    <col style="width:50%"/>
    <col style="width:50%"/>
  </colgroup>
  <thead>
    <tr>
      <th>desc.</th>
      <th>point</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>적용되는 행</td>
      <td class="tdTarget"></td>
    </tr>
    <tr>
      <td>미적용 행</td>
      <td></td>
    </tr>
    <tr>
      <td>적용되는 행</td>
      <td class="tdTarget"></td>
    </tr>
  </tbody>
</table>

CSS

.tb_01{width:500px; border: 1px solid black;}
.tb_01 th,td {border: 1px solid black;}
.tb_01 td {text-align:center;}


.bg_b {background-color:blue;}
.bg_r {background-color:red;}
.bg_g {background-color:green;}

JavaScript

$(document).ready(function(){
    let pointValue = 3;
    setBackgroundColorOnTd(pointValue);
});

function setBackgroundColorOnTd(v){

	// 클래스 초기화
	$('.tdTarget').removeClass('bg_b');
	$('.tdTarget').removeClass('bg_r');
	$('.tdTarget').removeClass('bg_g');
	
  //클래스를 다시 부여합니다.
  if(v <= 2.5){
    $('.tdTarget').addClass('bg_b');
  }else if(v >= 4){
    $('.tdTarget').addClass('bg_g');
  }else{
    $('.tdTarget').addClass('bg_r');
  }
}