jQuery로 선택한 테이블 행 강조하기

사용자가 선택한 항목을 시각적으로 강조하는 코드에 대해 설명한다.

'selected' 클래스를 추가, 제거하여 특정 행을 강조하는 방법을 소개하며, 이를 통해 사용자 경험을 향상시킬 수 있다.

코드의 장점과 개선할 부분을 고려하여, 더욱 효과적인 결과를 도출하는 데 도움이 될 것이다.

 

 

 

✨시작하며

선택된 행을 강조하는 코드가 필요해졌다.
사용 시 사용자가 선택한 항목을 시각적으로 구분함으로써 사용자 경험을 향상할 수 있을 것이다.

 

 

 

🧩코드 조각

<style>
.selected {background-color:#e8eff7;}
</style>

selected 클래스가 있는 모든 요소에 배경색을 적용한다.

 

$(document).on("click", "#species-table tbody td", function(){
    $("#species-table tbody tr").removeClass('selected');
    $(this).parent().addClass('selected');
});

#species-table의 tbody 내 모든 td 요소에 이벤트 리스너가 연결된다.
td를 클릭 시 모든 행(tr) 내부의 selected 클래스가 제거되며, 클릭된 셀(td)의 부모(tr)에게 selected 클래스가 부여되며 CSS 규칙에 따라 해당 부분이 강조된다.

 

 

 

이 코드의 장점은?

• 사용자들이 현재 선택 사항에 대해 시각적 반응을 얻을 수 있어 선택 사항을 추적할 때 유용할 것이다.
• 가볍다.
• jQuery 외부 라이브러리가 필요하지 않다.

 

개선할 부분은?

• 만약 테이블에 많은 수의 행이 있을 경우, 각 행에서 직접 클래스를 조작하는 것은 애플리케이션의 속도를 느리게 할 수 있다.
  이런 경우 가상화 라이브러리를 고려하면 좋다.
• 여러 항목을 동시에 선택할 필요가 있다면(한 번에 하나 이상의 행을 선택할 수 있어야 하는 경우), 클릭한 항목만 selected 클래스를 추가/제거하도록 한 방법을 수정해야 할 것이다.