테이블의 레코드에 롤오버/클릭 대한 처리를 제공하는 것을 TableRolloverEffect를 이용해서 구현해 보았습니다.
해당 JavaScript는 copyright 주석만 유지하면 프리로 사용가능합니다. *^^*
▣ TableRolloverEffect.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TableRolloverEffect</title>
<style type="text/css">
body {
font-size: 0.8em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin: 0px;
padding: 0px;
}
img {
border: 0px;
}
thead td {
font-weight: bold;
color: #000;
background-color: #E2EBED;
}
td {
padding: 2px;
}
table {
border: 1px solid #000;
border-collapse: collapse;
}
h1 {
font-size: 1.3em;
margin-bottom: 0px;
}
table,h1,p,#ads {
margin-left: 10px;
}
#ads {
margin-top: 20px;
}
/* These classes are used by the script as rollover effect for table 1 and 2 */
.tableRollOverEffect1 {
background-color: orange;
color: #FFFFFF;
}
.tableRowClickEffect1 {
background-color: red;
color: #FFFFFF;
}
.tableRollOverEffect2 {
background-color: lightblue;
color: #FFFFFF;
}
.tableRowClickEffect2 {
background-color: blue;
color: #FFFFFF;
}
</style>
<script type="text/javascript">
var arrayOfRolloverClasses = new Array();
var arrayOfClickClasses = new Array();
var activeRow = false;
var activeRowClickArray = new Array();
function highlightTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(this!=activeRow){
this.setAttribute('origCl',this.className);
this.origCl = this.className;
}
this.className = arrayOfRolloverClasses[tableObj.id];
activeRow = this;
}
function clickOnTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(activeRowClickArray[tableObj.id] && this!=activeRowClickArray[tableObj.id]){
activeRowClickArray[tableObj.id].className='';
}
this.className = arrayOfClickClasses[tableObj.id];
activeRowClickArray[tableObj.id] = this;
}
function resetRowStyle()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(activeRowClickArray[tableObj.id] && this==activeRowClickArray[tableObj.id]){
this.className = arrayOfClickClasses[tableObj.id];
return;
}
var origCl = this.getAttribute('origCl');
if(!origCl)origCl = this.origCl;
this.className=origCl;
}
function addTableRolloverEffect(tableId,whichClass,whichClassOnClick)
{
arrayOfRolloverClasses[tableId] = whichClass;
arrayOfClickClasses[tableId] = whichClassOnClick;
var tableObj = document.getElementById(tableId);
var tBody = tableObj.getElementsByTagName('TBODY');
if(tBody)
{
var rows = tBody[0].getElementsByTagName('TR');
}
else
{
var rows = tableObj.getElementsByTagName('TR');
}
for(var no=0;no<rows.length;no++)
{
rows[no].onmouseover = highlightTableRow;
rows[no].onmouseout = resetRowStyle;
if(whichClassOnClick)
{
rows[no].onclick = clickOnTableRow;
}
}
}
</script>
</head>
<body>
<h1>Table example 1 (Orange, Red)</h1>
<table id="myTable1">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>Kate</td>
<td>18</td>
<td>Marketing</td>
<td>50.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mona</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Male</td>
</tr>
<tr>
<td>Mark</td>
<td>25</td>
<td>Production</td>
<td>52.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<h1>Table example 2 (Lightblue, Blue)</h1>
<table id="myTable2">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>33</td>
<td>Production</td>
<td>55.000</td>
<td>Male</td>
</tr>
<tr>
<td>Jennifer</td>
<td>24</td>
<td>Production</td>
<td>49.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>25</td>
<td>Photography</td>
<td>51.000</td>
<td>Male</td>
</tr>
<tr>
<td>Anna</td>
<td>42</td>
<td>Head of photography</td>
<td>56.000</td>
<td>Female</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
<tr>
<td>Johnny</td>
<td>29</td>
<td>Freelancer</td>
<td>63.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
addTableRolloverEffect('myTable1','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>
</body>
</html>
▣ 페이지 로드
▣ Table 1 적용
클릭한 Row는 빨간색, 마우스오버인 Row는 오렌지색으로 표시된다.
▣ Table 2 적용
클릭한 Row는 파란색, 마우스오버인 Row는 하늘색으로 표시된다.
728x90
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
| [JavaScript] 날짜계산 및 문자열 출력 (0) | 2023.02.28 |
|---|---|
| [JavaScript] Base64 Encode & Decode 예제 (0) | 2023.02.28 |
| [JavaScript] 이미지 업로드 하기전 표시하기 (ImageViewer ) (0) | 2023.02.28 |
| [JavaScript] 모달창에서 부모창의 함수호출 (0) | 2023.02.28 |
| [JavaScript] 정규표현식 입력검증 (0) | 2023.02.28 |
댓글