DOM脚本与jquery4：行高亮显示

Posted 2021-02-26

/*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');});
});