原生js 實現table 被選中行變顏色
最近在做一個專案,因為框架原因,所有功能只能使用原生js開發(真的無語),碰到"實現table 被選中行變顏色"的需求,就在網上找了下,然後寫了一個js方法,只需要changeColorWithTrs(tableid)就可以實現(ps:也是為了自己方便引用,只要把table的id寫進去就可以實現功能)
程式碼如下:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id='table1' style='width:300px'>
<tr><td>1</td><td>這是第1行</td></tr>
<tr><td>2</td><td>這是第2行</td></tr>
<tr><td>3</td><td>這是第3行</td></tr>
<tr><td>4</td><td>這是第4行</td></tr>
<tr><td>5</td><td>這是第5行</td></tr>
<tr><td>6</td><td>這是第6行</td></tr>
</table>
</body>
<script>
//執行方法 傳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>