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

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

.tableClass tr
tableClass tr:hover


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 }


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