Advanced Search

Return to Snippet

Revision: 9223
at October 26, 2008 18:41 by demixo
Updated Code 
/*HTML*/
<table border="1">
	<tr>
		<td>1111111111</td>
		<td>1111111111</td>
		<td>1111111111</td>
		<td>1111111111</td>
	</tr>
	<tr>
		<td>2222222222</td>
		<td>2222222222</td>
		<td>2222222222</td>
		<td>2222222222</td>
	</tr>
	<tr>
		<td>3333333333</td>
		<td>3333333333</td>
		<td>3333333333</td>
		<td>3333333333</td>
	</tr>
	<tr>
		<td>4444444444</td>
		<td>4444444444</td>
		<td>4444444444</td>
		<td>4444444444</td>
	</tr>
	<tr>
		<td>5555555555</td>
		<td>5555555555</td>
		<td>5555555555</td>
		<td>5555555555</td>
	</tr>
</table>

/*CSS*/
.highlight {
	background-color: red;
	color: white;
}


/*DOM Scripting*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

function highlightRows() {
  if(!document.getElementsByTagName) return false;
  var rows = document.getElementsByTagName("tr");
  for (var i=0; i<rows.length; i++) {
    rows[i].oldClassName = rows[i].className
    rows[i].onmouseover = function() {
      addClass(this,"highlight");
    }
    rows[i].onmouseout = function() {
      this.className = this.oldClassName
    }
  }
}

addLoadEvent(highlightRows);

/*jQuery*/
$(document).ready(function(){
	$('tr').mouseover(function(){$(this).addClass('highlight');}).mouseout(function(){$(this).removeClass('highlight');});
});

Revision: 9222
at October 26, 2008 18:37 by demixo
Updated Code 
/*HTML*/
<table border="1">
	<tr>
		<td>1111111111</td>
		<td>1111111111</td>
		<td>1111111111</td>
		<td>1111111111</td>
	</tr>
	<tr>
		<td>2222222222</td>
		<td>2222222222</td>
		<td>2222222222</td>
		<td>2222222222</td>
	</tr>
	<tr>
		<td>3333333333</td>
		<td>3333333333</td>
		<td>3333333333</td>
		<td>3333333333</td>
	</tr>
	<tr>
		<td>4444444444</td>
		<td>4444444444</td>
		<td>4444444444</td>
		<td>4444444444</td>
	</tr>
	<tr>
		<td>5555555555</td>
		<td>5555555555</td>
		<td>5555555555</td>
		<td>5555555555</td>
	</tr>
</table>

/*CSS*/
.highlight {
	background-color: red;
	color: white;
}


/*DOM Scripting*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

function highlightRows() {
  if(!document.getElementsByTagName) return false;
  var rows = document.getElementsByTagName("tr");
  for (var i=0; i<rows.length; i++) {
    rows[i].oldClassName = rows[i].className
    rows[i].onmouseover = function() {
      addClass(this,"highlight");
    }
    rows[i].onmouseout = function() {
      this.className = this.oldClassName
    }
  }
}

addLoadEvent(highlightRows);

Revision: 9221
at October 26, 2008 18:35 by demixo
Updated Code 
/*HTML*/

<table border="1">
	<tr>
		<td>1111111111</td>
		<td>1111111111</td>
		<td>1111111111</td>
		<td>1111111111</td>
	</tr>
	
	<tr>
		<td>2222222222</td>
		<td>2222222222</td>
		<td>2222222222</td>
		<td>2222222222</td>
	</tr>
	
	<tr>
		<td>3333333333</td>
		<td>3333333333</td>
		<td>3333333333</td>
		<td>3333333333</td>
	</tr>
	
	<tr>
		<td>4444444444</td>
		<td>4444444444</td>
		<td>4444444444</td>
		<td>4444444444</td>
	</tr>
	
	<tr>
		<td>5555555555</td>
		<td>5555555555</td>
		<td>5555555555</td>
		<td>5555555555</td>
	</tr>
</table>


/*DOM Scripting*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

function highlightRows() {
  if(!document.getElementsByTagName) return false;
  var rows = document.getElementsByTagName("tr");
  for (var i=0; i<rows.length; i++) {
    rows[i].oldClassName = rows[i].className
    rows[i].onmouseover = function() {
      addClass(this,"highlight");
    }
    rows[i].onmouseout = function() {
      this.className = this.oldClassName
    }
  }
}

addLoadEvent(highlightRows);

Revision: 9220
at October 26, 2008 18:33 by demixo
Initial Code 
/
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
DOM Scripting vs jQuery 4: Row Highlighting

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript, DOM, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript