Daily coding

Java Script : 예제9 - 포털사이트 링크 연결하기 본문

Front-end/Java Script

Java Script : 예제9 - 포털사이트 링크 연결하기

sunnnkim 2020. 1. 9. 20:01

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.pagename{
background-color:green;
color: white;
}
tr{
height: 50px;
}
table{
text-align: center;
}
</style>
</head>
<body>
<h1>포털 사이트</h1>
"열기"버튼을 클릭하면 해당 홈페이지를 볼 수 있습니다.<br>
<table border="1" style=" width:40%; margin: 10px;" id="tb">
<col style="width: 35%">
<col style="width: 35%">
<col style="width: 30%">
<tr>
	<td class="pagename">네이버</td>
	<td>http://www.naver.com/</td>
	<td><input type="button" onclick="func(0)" value="열기"></td>
</tr>
<tr>
	<td class="pagename">다음</td>
	<td>http://www.daum.net/</td>
	<td><input type="button" onclick="func(1)" value="열기"></td>
</tr>
<tr>
	<td class="pagename">줌</td>
	<td>http://zoom.com/</td>
	<td><input type="button" onclick="func(2)" value="열기"></td>
</tr>


</table>
<script type="text/javascript">
function func( index ) {
	var url = document.getElementById("tb").rows[index].cells[1].innerHTML;
	window.open(url);
}

</script>

</body>
</html>

'Front-end > Java Script' 카테고리의 다른 글

Java Script : 예제10 - select 태그로 링크 이동 및 외부 이미지 끌어오기  (0) 2020.01.09
Java Script : 예제8 - element 생성해서 테이블 만들기  (0) 2020.01.09
Java Script : 예제7 - 테이블 및 배열로 계산하기  (0) 2020.01.09
Java Script : 예제6 - 마우스이벤트(onmouseover)  (0) 2020.01.09
Java Script : 예제5 - 현재 시간 출력하기  (0) 2020.01.09
'Front-end/Java Script' Related Articles more