페이지내에 class가 "classname"인 table을 찾아서 짝수열의 tr에 class "value"를 추가하는 스크립트.
마우스오버시엔 class="over"가 추가됨
table혹은 tr에 class가 겹쳐도 사용가능.
stripeBg(classname,value,over);
<script type="text/javascript">
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}
function removeClass(element,value) {
if (element.className == value) {
element.className = "";
} else if (element.className.indexOf(value) != -1) {
element.className = element.className.replace(value,"");
}
}
function stripeBg(classname,value,over) {
var tableEl = document.getElementsByTagName("table");
for (i=0; i<tableEl.length; i++) {
if (tableEl[i].className.indexOf(classname) != -1 ) {
var trEl = tableEl[i].getElementsByTagName("tr");
for (j=0; j<trEl.length; j++) {
if (j%2) {
addClass(trEl[j],value);
}
}
for (k=0; k<trEl.length; k++) {
trEl[k].onmouseover = function() {
addClass(this,over);
}
trEl[k].onmouseout = function() {
removeClass(this,over);
}
}
}
}
}
addEvent(window,'load',function () {
stripeBg("stripe_bg","rowbg","over");
},false);
</script>