Table row or Gridview Row colour change effect on mouse move with Javascript and CSS

Godly77
Posted by Godly77 under JavaScript category on | Points: 40 | Views : 3887
Below Code will helps to bring mouse over effect in a HTML table or Gridview.


<style>
.tableClass tr
{
background-color:#ffffff;
}
tableClass tr:hover
{
background-color:#c0c0c0;
}
</style>

<script>


function AddHoverToTable(_tab, ClassName, _StartFrom) {
_tab = document.getElementById(_tab).getElementsByTagName("tr");
_StartFrom = (_StartFrom === undefined ? 0 : _StartFrom);
var _tablen = _tab.length;
for (x = _StartFrom; x < _tablen; x++) {

addClass(_tab[x], ClassName);

}

}


function addClass(e, c) { e.setAttribute("class", c); e.setAttribute("className", c); return e }

</script>



AddHoverToTable(_tab, ClassName, _StartFrom)
_tab ="ID of your Table or GridView"
ClassName ="Css Class Name"
_StartFrom ="You can specify the row Number, if you want to avoid row header of the grid from the effect you can pass the value as 2"

Comments or Responses

Login to post response