[21.10.18] exam01(06_jQueryDOM) - 문서 객체 모델(DOM, Document Object Model) 예제문

JAVA_EE/JQuery

[21.10.18] exam01(06_jQueryDOM) - 문서 객체 모델(DOM, Document Object Model) 예제문

luvforjunk 2021. 10. 18. 10:57

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
td {
	width: 100px;
	height: 100px;
	text-align: center;
}
</style>
</head>
<body>
	<table border="1">
		<tr>
			<td>1번</td>
			<td>2번</td>
			<td>3번</td>
		</tr>
		<tr>
			<td>4번</td>
			<td>5번</td>
			<td>6번</td>
		</tr>
		<tr>
			<td>7번</td>
			<td>8번</td>
			<td>9번</td>
		</tr>
	</table>

	<script type="text/javascript"
		src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("td:eq(4)").css("background", "#ffff00");
			$("td").eq(2).css("background", "#ff0000");
			$("td:eq(4)").next().css("background", "#00ff00");
			$("td").eq(4).prev().css("background", "#0000ff");

			$("td:eq(4)").parent().css("color", "#ff0000");
			$("td").eq(4).parent().prev().css("color", "#0000ff");
			$("td:eq(4)").parent().next().children().css("text-decoration","underline");
			$("td").eq(4).parent().next().children().eq(1).css("font-weight","bold");
		});
	</script>

</body>
</html>

[결과]

728x90