ホームページ > 記事 > ウェブフロントエンド > jQueryで表の行の変色とマウスオーバーによる強調表示を実現（コード添付）
jQueryで表の行の変色とマウスオーバーによる強調表示を実現（コード添付）
- php中世界最好的语言オリジナル
- 2018-04-24 09:50:392022ブラウズ
今回は、テーブルのインターレースカラー変更とマウスオーバーハイライトのjQuery実装についてご紹介します(コード付き) jQueryはテーブルのインターレースカラー変更とマウスオーバーハイライトを実装します以下は実際的なケースです。 1 立ち上がって見てください。
このプラグインは、テーブル内の 1 行おきの行の色を変更するように設計されており、マウスがテーブルの特定の行上に移動すると、その行が強調表示されます。全体的なコードは次のとおりです:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格隔行变色且鼠标滑过高亮显示</title>
<style>
table{border-collapse:collapse;border:none;width:20%;}
table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;}
.evenRow{background:#f0f0f0;}
.oddRow{background:#ff0;}
.activeRow{background:#f00;color:#fff;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<script>
/*
* tableUI 0.1
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
* Dependence jquery-1.7.1.js
*/
;(function($){
$.fn.tableUI = function(options){ //经常用options表示有许多个参数
//各种属性、参数 创建一些默认值，拓展任何被提供的选项
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
};
var obj = $.extend(defaults,options);
this.each(function(){ //this关键字代表了这个插件将要执行的jQuery对象 此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。 $(this)等同于 $($('#element'));
//插件实现代码
var thisTable = $(this); //获取当前对象 此时this关键字代表一个DOM元素 我们可以alert打印出此时的this代表的是object HTMLTableElement
//添加奇偶行颜色
$(thisTable).find("tr:even").addClass(obj.evenRowClass);
$(thisTable).find("tr:odd").addClass(obj.oddRowClass);
//添加活动行颜色
$(thisTable).find("tr").mouseover(function(){
$(this).addClass(obj.activeRowClass);
});
$(thisTable).find("tr").mouseout(function(){
$(this).removeClass(obj.activeRowClass);
});
});
};
})(jQuery);
//在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。
</script>
<table cellpadding="0" cellspacing="0">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
$(function(){
$("table").tableUI();
})
</script>
</body>
</html> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
Jquery操作オブジェクトの配列要素メソッドの概要(ケース付き)
以上がjQueryで表の行の変色とマウスオーバーによる強調表示を実現（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。