html设置表格点击变色,js实现表格变色点击行颜色改变



forword

js实现表格变色点击行颜色改变

table

table {

border-top:1px   solid   black;

border-left:1px   solid   black;

cursor:default;

}

td {

border-bottom:1px   solid   black;

border-right:1px   solid   black;

height:23px;

}

one

two

three

four

管理员1管理员1管理员1管理员1管理员2

table

table {

border-top:1px solid black;

border-left:1px solid black;

cursor:default;

}

td {

border-bottom:1px solid black;

border-right:1px solid black;

height:23px;

}

one	two	three	four
管理员1	管理员1	管理员1	管理员1
管理员2

js代码：

//鼠标点击选择行时候变色

functionchange(change) {

varoObj = window.event.srcElement;

//alert(change.tagName.toLowerCase());

if(oObj.tagName.toLowerCase() =="td"){

varoTr = oObj.parentNode;

for(vari=1; i

document.all.table1.rows[i].style.backgroundColor   =   "";

document.all.table1.rows[i].tag = false;

}

oTr.style.backgroundColor = "#CCCCFF";

oTr.tag = true;

}

}

//鼠标点击另外一行时关闭已选行变色

functionout() {

varoObj = event.srcElement;

if(oObj.tagName.toLowerCase() =="td"){

varoTr = oObj.parentNode;

if(!oTr.tag) oTr.style.backgroundColor ="";

}

}

//鼠标移动到选择行上时的行变色

functionover(){

varoObj = event.srcElement;

if(oObj.tagName.toLowerCase() =="td"){

varoTr = oObj.parentNode;

if(!oTr.tag) oTr.style.backgroundColor ="#E1E9FD";

}

}