[2주차 과제] 심화 추가

[huniversal]

👽 과제 명세

2차 과제 심화 세션 추가

🔧 구현 요약 및 새로 배운 점

테이블 열 클릭 시 링크 이동 기능 구현

• 열에 클릭 가능한 링크 기능 추가
• 각 열의 값을 이용하여 외부 링크로 이동

변경 전

이름, 영문 이름, 나이, 금잔디조 열은 텍스트만 표시됨
클릭해도 아무 동작 없음

변경 후

위 4개 열에 클릭 이벤트 추가
클릭하면 해당 셀 값을 사용해 링크로 이동

// 1. 스타일 추가 -> 클릭 가능함을 시각적으로 표시)
cell.style.cursor = "pointer";             
cell.style.textDecoration = "underline";  
cell.style.color = "#0066cc";              

// 2. 텍스트 표시
cell.textContent = value;

// 3. 클릭 이벤트 추가
cell.addEventListener("click", () => {
  // 해당 셀의 값(value) 검색 URL에 넣어서 새 탭에서 열기
  window.open(`https://www.google.com/search?q=${encodeURIComponent(value)}`, "_blank");
});

📷 결과물

2025-12-19.20.10.36.mov