row 색상변경 결정판~(...이려나?) 조회수:1495
전영규님의 의견을 받아서 table 에 onmouseover 이벤트를 줬습니다.
row 단위로 번갈아가며 나타내는 색상도 가능하며 보통 게시판등에서
첫줄이 고정 줄임을 감안해서 "고정줄"을 지정할 수 있도록 했습니다.
rowCh(this, 1, '#EDEDED')
이렇게 하면 첫줄을 제외한 모든 줄이 오버시에 #EDEDED 색상으로 변경됩니다.
rowCh(this, 0, '#EDEDED', '#CCCCCC')
모든 줄이 홀짝순으로 #EDEDED와 #CCCCCC가 번갈아가며 나타납니다.
rowCh(this, 2, '#EDEDED', '#CCCCCC', '#909090')
위에서 두줄을 제외한 나머지 줄에 대해 세가지 색상이 번갈아가며 나타납니다.
사용법은 아래 예제를 참고하세요.
P.S// 비슷한 류의 팁들은 한곳에 모을 수 있도록 되면 좋겠는데, 팁텍에서는
새 쓰레드가 아니면 아예 묻히다시피 해서 모아둘 수가 없네요. -_-;;
-------------------------------------------------
아래 코드를 주욱 긁어서 사용하세요.
-------------------------------------------------
<html>
<head>
<title>row 색상변경</title>
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<script>
//
// row 단위 색상변경 (by 행복한고니)
//
function rowCh(obj, fixed_row)
{
var args = rowCh.arguments;
var argl = args.length;
var TRs = new Array;
var idx, orgColor, colorIdx=0;
if (argl < 3) return;
if (typeof(obj.already) == 'undefined') obj.already = false;
if (obj.already) return;
TRs = obj.getElementsByTagName('TR');
for (idx=fixed_row; idx<TRs.length; idx++)
{
orgColor = TRs[idx].bgColor;
if (TRs[idx].style.backgroundColor.toString().length > 0) orgColor = TRs[idx].style.backgroundColor;
TRs[idx].onmouseover = new Function('this.style.backgroundColor="'+(args[2+colorIdx])+'";');
TRs[idx].onmouseout = new Function('this.style.backgroundColor="'+orgColor+'";');
if (++colorIdx > argl-3) colorIdx = 0;
}
obj.already = true;
}
</script>
<table border="1" onmouseover="rowCh(this, 1, '#EDEDED', '#CCCCCC')">
<tr>
<td>____1____</td>
<td>____2____</td>
<td>____3____</td>
<td>____4____</td>
</tr>
<tr>
<td>____5____</td>
<td colspan="2">____6____</td>
<td>____7____</td>
</tr>
<tr>
<td>____8____</td>
<td>____9____</td>
<td>____10____</td>
<td>____11____</td>
</tr>
</table>
</body>
</html>
전영규님의 의견을 받아서 table 에 onmouseover 이벤트를 줬습니다.
row 단위로 번갈아가며 나타내는 색상도 가능하며 보통 게시판등에서
첫줄이 고정 줄임을 감안해서 "고정줄"을 지정할 수 있도록 했습니다.
rowCh(this, 1, '#EDEDED')
이렇게 하면 첫줄을 제외한 모든 줄이 오버시에 #EDEDED 색상으로 변경됩니다.
rowCh(this, 0, '#EDEDED', '#CCCCCC')
모든 줄이 홀짝순으로 #EDEDED와 #CCCCCC가 번갈아가며 나타납니다.
rowCh(this, 2, '#EDEDED', '#CCCCCC', '#909090')
위에서 두줄을 제외한 나머지 줄에 대해 세가지 색상이 번갈아가며 나타납니다.
사용법은 아래 예제를 참고하세요.
P.S// 비슷한 류의 팁들은 한곳에 모을 수 있도록 되면 좋겠는데, 팁텍에서는
새 쓰레드가 아니면 아예 묻히다시피 해서 모아둘 수가 없네요. -_-;;
-------------------------------------------------
아래 코드를 주욱 긁어서 사용하세요.
-------------------------------------------------
<html>
<head>
<title>row 색상변경</title>
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<script>
//
// row 단위 색상변경 (by 행복한고니)
//
function rowCh(obj, fixed_row)
{
var args = rowCh.arguments;
var argl = args.length;
var TRs = new Array;
var idx, orgColor, colorIdx=0;
if (argl < 3) return;
if (typeof(obj.already) == 'undefined') obj.already = false;
if (obj.already) return;
TRs = obj.getElementsByTagName('TR');
for (idx=fixed_row; idx<TRs.length; idx++)
{
orgColor = TRs[idx].bgColor;
if (TRs[idx].style.backgroundColor.toString().length > 0) orgColor = TRs[idx].style.backgroundColor;
TRs[idx].onmouseover = new Function('this.style.backgroundColor="'+(args[2+colorIdx])+'";');
TRs[idx].onmouseout = new Function('this.style.backgroundColor="'+orgColor+'";');
if (++colorIdx > argl-3) colorIdx = 0;
}
obj.already = true;
}
</script>
<table border="1" onmouseover="rowCh(this, 1, '#EDEDED', '#CCCCCC')">
<tr>
<td>____1____</td>
<td>____2____</td>
<td>____3____</td>
<td>____4____</td>
</tr>
<tr>
<td>____5____</td>
<td colspan="2">____6____</td>
<td>____7____</td>
</tr>
<tr>
<td>____8____</td>
<td>____9____</td>
<td>____10____</td>
<td>____11____</td>
</tr>
</table>
</body>
</html>
'Web > Javascript' 카테고리의 다른 글
| 이미지 전환하기 (0) | 2013.09.26 |
|---|---|
| 배경색 자동으로 변경 (0) | 2013.09.26 |
| 그냥 selectbox 관련해서 만들어봣다. (0) | 2013.09.26 |
| ObjectParseInt (0) | 2013.09.26 |
| array_sum (0) | 2013.09.26 |