컴퓨터/jQuery
[jQuery] 부트스트랩
peridott
2024. 7. 11. 21:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<title>게시판 리스트</title>
<style>
body {padding: 0 80px;}
table {
border: 1px solid;
border-collapse: collapse;
}
tbody>tr:hover {
cursor:pointer;
}
</style>
</head>
<body>
<br><br>
<h2 align="center">게시판 리스트</h2><br>
<table border="1" class="table table-hover">
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>세번째 글 제목</td>
<td>user01</td>
<td>23</td>
<td>2023-03-31</td>
</tr>
<tr>
<td>2</td>
<td>두번째 글 제목</td>
<td>user02</td>
<td>15</td>
<td>2023-03-13</td>
</tr>
<tr>
<td>1</td>
<td>첫번째 글 제목</td>
<td>admin</td>
<td>75</td>
<td>2023-03-12</td>
</tr>
</tbody>
</table>
<br><br>
선택된 게시글 정보 :
<span id="s0">글번호</span> /
<span id="s1">제목</span> /
<span id="s2">작성자</span> /
<span id="s3">조회수</span> /
<span id="s4">작성일</span>
<script>
$(() => {
$('tbody>tr').click(function() {
// console.log($(this).children().eq(0).text());
// console.log($(this).children().eq(1).text());
$(this).children().each(function(index, el) {
//console.log($(el).text());
$('#s'+index).text($(el).text());
});
});
})
</script>
<br><br>
<button type="button" class="btn btn-success btn-lg">회원가입</button> 
<button type="button" class="btn btn-secondary btn-sm">회원탈퇴</button><br><br>
<button type="button" class="btn btn-outline-success">회원가입</button> 
<button type="button" class="btn btn-outline-secondary">회원탈퇴</button>
<br><br>
<form action="">
<div class="mb-3">
<label for="uId" class="form-label">ID : </label>
<input type="text" class="form-control" id="uId" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password : </label>
<input type="password" class="form-control" id="pwd" placeholder="특수문자1개,영문자1개,숫자1개 반드시 포함">
</div>
<button type="submit" class="btn btn-outline-danger">로그인</button>
</form>
<br><br>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">로그인</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">로그인 하기</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="id" class="col-form-label">ID :</label>
<input type="text" class="form-control" id="id">
</div>
<div class="mb-3">
<label for="pw" class="col-form-label">PW :</label>
<input type="password" class="form-control" id="pwd">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">로그인</button>
</div>
</div>
</div>
</div>
</body>
</html>