본문 바로가기
프론트앤드 개발

테이블에 마우스오버하면 그줄 전부가 색이 달라지는 javascript

by 긴자손 2010. 10. 15.
728x90
반응형

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 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)

{

arrayOfRolloverClasses[tableId] = whichClass;


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 i=0;i<rows.length;i++){

rows[i].onmouseover = highlightTableRow;

rows[i].onmouseout = resetRowStyle;

}

}

728x90
반응형