본문 바로가기
Study/HTML5,CSS,JQuery

[HTML5/CSS3/JQUERY] table : 테이블 example

힝쏘 2019. 5. 27. 14:49

테이블 태그를 이용한 효과 1

 

 

tableEffect.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<link rel="stylesheet" href="tableEffect.css" type="text/css"> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="tableEffect.js"></script> 

<style type="text/css"> 
    td, th { 
        border: 1px solid #ff00ff; 
    } 
</style> 
</head> 
<body> 
    <table style="border:1px solid blue; width: 200px;"> 
        <thead> 
            <tr> 
                <th>사번</th> 
                <th>이름</th> 
                <th>평점</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr><td>101</td><td>일번삼</td><td>95</td></tr> 
            <tr><td>102</td><td>이번삼</td><td>55</td></tr> 
            <tr><td>103</td><td>삼번삼</td><td>75</td></tr> 
            <tr><td>104</td><td>사번삼</td><td>65</td></tr> 
        </tbody> 
    </table> 
</body> 
</html>

 

 

tableEffect.css

.hover { 
    background: #0000ff; 
    color: #ffffff; 
}

 

 

tableEffect.js

$(document).ready(function() {
 $('tbody tr').hover(
  function() {
   $(this).find('td').addClass('hover'); 
  }, 
  function() {
   $(this).find('td').removeClass('hover');
  }
 );
});

 

 

 

 

테이블 태그를 이용한 효과 2

 

 

tablePage.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<link rel="stylesheet" href="tablePage.css" type="text/css"> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="tablePage.js"></script> 
<style type="text/css"> 
    td, th { 
        border: 1px solid #ff00ff; 
    } 
</style> 
</head> 
<body> 
    <table style="border: 3px solid blue; width: 200px;"> 
        <thead> 
            <tr> 
                <th>사번</th> 
                <th>이름</th> 
                <th>평점</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr><td>101</td><td>일번삼</td><td>95</td></tr> 
            <tr><td>102</td><td>이번삼</td><td>55</td></tr> 
            <tr><td>103</td><td>삼번삼</td><td>75</td></tr> 
            <tr><td>104</td><td>사번삼</td><td>65</td></tr> 
            <tr><td>105</td><td>오번삼</td><td>77</td></tr> 
             
            <tr><td>101</td><td>일번삼</td><td>95</td></tr> 
            <tr><td>102</td><td>이번삼</td><td>55</td></tr> 
            <tr><td>103</td><td>삼번삼</td><td>75</td></tr> 
            <tr><td>104</td><td>사번삼</td><td>65</td></tr> 
            <tr><td>105</td><td>오번삼</td><td>77</td></tr> 
             
            <tr><td>101</td><td>일번삼</td><td>95</td></tr> 
            <tr><td>102</td><td>이번삼</td><td>55</td></tr> 
            <tr><td>103</td><td>삼번삼</td><td>75</td></tr> 
            <tr><td>104</td><td>사번삼</td><td>65</td></tr> 

             
            <tr><td>101</td><td>일번삼</td><td>95</td></tr> 
            <tr><td>102</td><td>이번삼</td><td>55</td></tr> 
            <tr><td>103</td><td>삼번삼</td><td>75</td></tr> 
            <tr><td>104</td><td>사번삼</td><td>65</td></tr> 
            <tr><td>105</td><td>오번삼</td><td>77</td></tr> 
             
            <tr><td>101</td><td>일번삼</td><td>95</td></tr> 
            <tr><td>102</td><td>이번삼</td><td>55</td></tr> 
            <tr><td>103</td><td>삼번삼</td><td>75</td></tr> 


        </tbody> 
    </table> 
</body> 
</html>

 

 

tablePage.css

 

.hover {
 background: #0000ff;
 color: #ffffff;
 cursor: pointer;
 font-size:  20px;
}

.page {
 margin: 5px;
}

 

 

tablePage.js

$(document).ready(function() {
 var rows = $('table').find('tbody, tr').length; // 24
 //alert(rows);
 
 var per_page = 5;
 var no_pages = Math.ceil(rows/per_page); // Math.ceil = 무조건 올림, 5
 var pagenumbers = $('
');
 
 for (var i=0; i<no_pages i="i">'+(i+1)+'').appendTo(pagenumbers);
 }
 
 pagenumbers.insertBefore('table');
 $('.page').hover(
  function() {
   $(this).addClass('hover');
  }, 
  function() {
   $(this).removeClass('hover');
  }
 );
 
 $('table').find('tbody tr').hide();
 var tr = $('table tbody tr');
 
 for(var i=0; i<=per_page-1; i++) {
  $(tr[i]).show();
 }
 
 $('span').click(function(e) {
  $('table').find('tbody tr').hide();
  for (i=($(this).text()-1)*per_page; i<=$(this).text()*per_page-1; i++) {
   $(tr[i]).show();
  }
 });
 
 
});

 

저작자표시

'Study > HTML5,CSS,JQuery' 카테고리의 다른 글

[HTML5/CSS3/JQUERY] meter : 문자 입력 수에 따른 progress example  (0) 2019.05.27
[HTML5/CSS3/JQUERY] image : 이미지 example  (0) 2019.05.27
[HTML5/CSS3/JQUERY] menu : 메뉴 example  (0) 2019.05.22
[HTML5/CSS3/JQUERY] effect : 효과 이벤트 example  (0) 2019.05.22
[HTML5/CSS3/JQUERY] event : 이벤트 example  (0) 2019.05.22

'Study/HTML5,CSS,JQuery' Related Articles

티스토리툴바