<html>
<head>
<title> jquery test : test10_jq_.html </title>
<style>
.style1 { background-color:#CFCFE7; color: #000000;}
</style>
<script src="/testMyWebPrj/jqueryLib/jquery-1.6.2.min.js" type="text/javascript"></script>
<script>
$(document).ready( function() {
$('#staff thead tr').css('background', '#C6C6FF');
$('#staff tbody tr:odd').css('background', '#E8E8E8');
$('#staff tbody tr:even').css('background', '#FFFFFF');
$('#staff tbody tr').hover(
function(){
$(this).find('td').addClass('style1');
},
function(){
$(this).find('td').removeClass('style1');
}
);
$('#staff thead th').hover(
function(){
var no = $(this).parent().children().index(this)+1;
$('#staff tbody td:nth-child('+no+')').addClass('style1');
},
function(){
$('#staff tbody tr').children().removeClass('style1');
}
);
} );
</script>
</head>
<body>
<table id="staff" border=1 cellpadding=5>
<thead>
<tr>
<th>1.이름</th>
<th>2.혈액형</th>
<th>3.지역</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
</tr>
</tbody>
</table>
</body>
</html>
'W01. Work & IT > w12. [개발-FrontEnd] JSP외' 카테고리의 다른 글
| [Vue] 1일차_개발환경 (2) | 2025.01.16 |
|---|---|
| 20200130_개발_html (0) | 2020.01.30 |
| [Vue.js] #01. (0) | 2018.01.25 |
| HTML5 공부 (0) | 2017.08.22 |
| [jsTest] java script 날짜테스트 (0) | 2015.09.06 |