jQuery 문제 풀이 (1번~5번)

해당 문제 풀이는 별도의 홈페이지에서 공부한 것을 올리는 글입니다.

 

배워가는 과정이다 보니 효율적이지 못하거나 잘못된 부분이 있을 수도 있습니다.

 

[1번 문제] 4번째 Item을 지워라

$("tbody tr:eq(4)").remove();

-> tbody에서 4번째에 있는 tr을 지움

 

[2번 문제] 1번째와 2번째의 위치를 바꿔라

$(".table-list--person > tbody > tr").eq(1).after($(".table-list--person > tbody > tr")).eq(2)

-> table의 클래스(table-list--person)에서 tbody - tr의 경로로 첫번째의 목록과 2번째의 목록의 위치를 바꿈

 

[3번 문제] 짝수의 Background 를 노란색으로 변경

$("tbody tr:even").css("backgroundColor","#FFDC3C");

-> tbody의 tr의 짝수 열의 css - backgroundcolor를 노란색으로 변경함

 

[4번 문제] 20대인 사람의 배경색을 빨강색으로 변경

$("tr:contains('20세')").css("background", "red");
$("tr:contains('21세')").css("background", "red");
$("tr:contains('22세')").css("background", "red");
$("tr:contains('23세')").css("background", "red");
$("tr:contains('24세')").css("background", "red");
$("tr:contains('25세')").css("background", "red");
$("tr:contains('26세')").css("background", "red");
$("tr:contains('27세')").css("background", "red");
$("tr:contains('28세')").css("background", "red");
$("tr:contains('29세')").css("background", "red");

->20대 전체를 포함하는 방법을 몰라서 tr 내부에 contains를 통해 해당 단어를 포함하는 것들을 변경

※contains 태그는 :contains('  ')에서 ' ' 안에 있는 단어를 포함하는 곳을 선택

 

[5번 문제] 모든 행에 대해서 마우스를 올렸을 때 테두리가 파란색(5px)으로 변경, 마우스를 떼면 원래대로

$("tbody tr").mouseover(function(){$(this).css({"border":"solid blue 5px"});})
$("tbody tr").mouseleave(function(){$(this).css({"border":"none"});})

-> mouseover와 mouseleave 태그를 통해서 마우스를 올렸을때와 마우스가 떠났을때를 기준으로 변경시킴