JavaScript DOM脚本与jQuery 4：行突出显示

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM脚本与jQuery 4：行突出显示相关的知识，希望对你有一定的参考价值。

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

以上是关于JavaScript DOM脚本与jQuery 4：行突出显示的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript DOM循环引用问题的精确解释

jQuery与DOM区别以及$的作用

jQuery与DOM区别以及$的作用

JavaScript与jQuery的区别

jquery操作DOM

jquery与JavaScript