728x90
게시판 리스트 조회 페이지인 보드리스트뷰
제이쿼리 css() 안에 백그라운드나 컬러 등 안에 쓰는 코드가 좀 많이 헷갈렸음
몇번 썼다 지우고 해봤는데 더 연습이 필요할 듯함
페이징 처리는 따로 많이 연습해야겠다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncodoing="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> prac </title>
<style type="text/css">
#tb{margin: auto; width: 700px; border-collapse: collapse;}
#tb tr td{ paddign: 5px;}
#buttonTab{ border-left:hidden; border-right:hidden;}
</style>
</head>
<body>
<c:import url="../common/menubar.jsp"/>
<h1 align="center">게시글 목록</h1>
<h3 align="center">총 게시글 갯수 : ${ pi.listCount }</h3>
<table border="1" id="tb">
<!-- 제목 tr -->
<tr style="backgroud:yellowgreen;">
<th>번호</th>
<th width="300">제목</th>
<th>작성자</th>
<th>날짜</th>
<th>조회수</th>
<th>첨부파일</th>
</tr>
<!-- 내용 tr -->
<c:forEach var="b" items="${ list }">
<tr class="contentTr">
<td align="center">${ b.boardId }</td>
<td align="left">${ b.boardTitle }</td>
<td align="center">${ b.nickName }</td>
<td align="center">${ b.boardCreateDate }</td>
<td align="center">${ b.boardCount }</td>
<td align="center">
<td align="left">
<c:if test="${!empty b.originalFileName }">
◎
</c:if>
</td>
</tr>
</c:forEach>
<!-- 글쓰기 버튼 tr -->
<tr>
<td>
<c:if test="${ !empty loginUser }">
& <!-- : 공백을 표시하기 위한 특수문자 -->
<button onclick="location.href='binsertView.bo';">글쓰기</button>
</c:if>
</td>
</tr>
<!-- 페이징 처리 -->
</table>
<script>
// 테이블 중에서 find 후손을 찾겠다. 마우스가 들어가있으면 그 tb에서 하나위로 올라가고(tr까지) tr에 대해서 백그라운드를 변경
$('.contentTr').find("td").mouseenter(function(){
$(this).parent().css({'background':'rgba(0, 100, 0, 0.5)', 'color': 'white', 'cursor': 'pointer' });
}).mouseout(function(){
$(this).parent().css({'background':'none', 'color':'black'});
}).click(function(){
var bId = $(this).parent().children('td').eq(0).text();
location.href = 'bdetail.bo?bId=' + bId + "&page=" + ${ pi.currentPage};
})
</script>
</body>
</html>728x90
반응형
'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글
| [1일1코딩][git] 브랜치 생성, 변경, 삭제, add, commit, push (0) | 2022.07.26 |
|---|---|
| [1일1코딩][Web] 뷰단의 페이징 처리 코드 (0) | 2022.07.25 |
| [1일1코딩][JS] text박스의 밸류값 읽어오기 (0) | 2022.07.23 |
| [1일 1코딩][Web] myPage.jsp (feat. EL+JSTL) 3 (0) | 2022.07.22 |
| [1일 1코딩][Web] memberUpdateForm.jsp (feat. EL+JSTL) 2 (0) | 2022.07.21 |