失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html设置表格点击变色 js实现表格变色点击行颜色改变

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

时间:2024-05-17 15:41:57

相关推荐

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



forword

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

table

table{

border-top:1pxsolidblack;

border-left:1pxsolidblack;

cursor:default;

}

td{

border-bottom:1pxsolidblack;

border-right:1pxsolidblack;

height:23px;

}

one

two

three

four

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

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;

}

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";

}

}

如果觉得《html设置表格点击变色 js实现表格变色点击行颜色改变》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。