原生js 实现table 被选中行变颜色

最新推荐文章于 2024-07-26 20:51:40 发布

杜小誊

最新推荐文章于 2024-07-26 20:51:40 发布

阅读量6.7k

点赞数 1

文章标签：原生js 被选中行变颜色前端 Html

本文链接：https://blog.csdn.net/wh18222/article/details/81507991

版权

最近在做一个项目,因为框架原因,所有功能只能使用原生js开发(真的无语),碰到"实现table 被选中行变颜色"的需求,就在网上找了下,然后写了一个js方法,只需要changeColorWithTrs(tableid)就可以实现(ps:也是为了自己方便引用,只要把table的id写进去就可以实现功能)

代码如下:

//执行方法传tab id
changeColorWithTrs('table1');
//点击行内，渲染整行背景色
function changeColorWithTrs(tabid){
var table1=document.getElementById(tabid);
var trs = table1.getElementsByTagName('tr');
for( var i=0; i<trs.length; i++ ){
trs[i].onmousedown = function(){
tronmousedown(this,tabid);
}
}
}
function tronmousedown(obj,tabid){
var table1=document.getElementById(tabid);
var trs = table1.getElementsByTagName('tr');
for( var o=0; o<trs.length; o++ ){
if( trs[o] == obj ){
trs[o].style.backgroundColor = '#DFEBF2'; //渲染颜色根据自己需要调整
}else{
trs[o].style.backgroundColor = '';
}
}
}
</script>
</html>