03. jQuery로 테이블 점수 색상 처리 & 총합 계산

✅ 주요 포인트

• $('td:nth-child(2)') → 모든 행에서 두 번째 <td> (점수 칸) 선택
• .each(function(){ ... }) → 점수 칸을 하나씩 반복 처리
• $(this).text() → 현재 선택한 <td> 안의 값 가져오기
• .parent() → 현재 <td>의 부모(<tr>) 선택

---

✅ 동작 코드

$(document).ready(function(){
  let sum = 0;

  $('td:nth-child(2)').each(function(){
    let score = eval($(this).text()); // td의 값(문자열 → 숫자)

    sum += score;

    if(score >= 80){
      $(this).parent().css('backgroundColor', 'cyan'); // 행 전체 색
    } else if(score <= 30){
      $(this).css('backgroundColor', 'red'); // 해당 셀만 빨간색
    } else {
      $(this).css('backgroundColor', 'pink'); // 해당 셀만 분홍색
    }
  });

  $('.result').append("총합 : " + sum);
});

 

 

• $(this) → 반복문 안에서 지금 처리 중인 <td> 하나
• .text() → 그 <td>의 텍스트 값 (점수)
• .css() → 그 <td>에 직접 CSS 적용
• .parent() → 그 <td>의 부모 <tr> 선택

 

 

 

✅ 배운 메서드 정리

• :nth-child(n) → n번째 자식 요소 선택 (여기서는 2번째 <td>)
• .each() → 선택된 요소를 반복 처리
• .text() → 요소의 텍스트 가져오기
• .parent() → 부모 요소 선택
• .css() → CSS 속성 직접 적용
• .append() → 선택한 요소 끝에 내용 추가

---

📌 $(this)의 의미

• 현재 선택된 요소를 가리킵니다.
• jQuery의 each() 같은 반복문 안에서 자주 쓰여요.
• 그냥 this는 JavaScript의 DOM 객체를 의미하고,
  $(this)는 그 DOM 객체를 jQuery 객체로 감싼 것이라 jQuery 메서드(.css(), .text(), .append() 등)를 바로 쓸 수 있게 됩니다.

 

📌 예시

1. 일반 JavaScript의 this

document.querySelectorAll("td")[1].onclick = function(){
  console.log(this.innerHTML); // 클릭한 td의 내용
};

 

 

2. jQuery의 $(this)

$("td").click(function(){
  console.log($(this).text()); // 클릭한 td의 텍스트
  $(this).css("backgroundColor", "yellow"); // 클릭한 셀 배경색 변경
});