コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > マウスの移動に応じて色が変わるテーブル行の例_jquery

マウスの移動に応じて色が変わるテーブル行の例_jquery

WBOY
リリース： 2016-05-16 16:49:31
オリジナル
1228 人が閲覧しました

1、设计表格

复制代 代码如下:






































































工号 姓 年龄 性别
2014010101 张峰 56 男
2014010102 李玉 42 女
2014010103 王珂 36 男
2014010104 张钰 31 女
2014010105 朱顾 44 男
2014010106 胡雨 35 女
2014010107 刘希 30 男
2014010108 孙宇 45 女
2014010109 谷雨 33 男
2014010110 科宇 45 女




2、设计样式
复制代码代码如下:

.html_body .body_div{
幅: 1340;
身長: 595;
}
.body_div{
フォントサイズ: 12px;
背景色: #CCCCCC;
}
.tr_odd{
背景色: オレンジ;
}
.tr_even{
背景色: 水色;
}
.mouse_color{
背景色: 緑;
}
#tab{
ボーダー: 1px #FF0000 実線;
text-align: 中央;
幅: 100%;
高さ: 100%;
}

3、设计JS
复制代码代码如下:

//设置奇数行背景色
$("#tab tr:odd").find("td").addClass("tr_odd");
//設置偶数行背景色
$("#tab tr:even").find("td").addClass("tr_even");

/**
* マウスの色は
に移動しました*/
$("#tab tr").mouseover(function(){
$(this).find("td").addClass("マウスカラー");
});

/**
* マウス移動の色
*/
$("#tab tr").mouseout(function(){
$(this).find("td").removeClass("マウスカラー");
});

4. デザイン結果

(1) 初期化
マウスの移動に応じて色が変わるテーブル行の例_jquery
(2) 奇数行をクリック
マウスの移動に応じて色が変わるテーブル行の例_jquery
(3) 偶数行をクリックrow
マウスの移動に応じて色が変わるテーブル行の例_jquery
5. 付録
コードをコピー コードは次のとおりです。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>



<頭>

表随鼠标变色

















































































工号 姓 年龄 性别
2014010101 张峰 56 男
2014010102 李玉 42 女
2014010103 王珂 36 男
2014010104 张钰 31 女
2014010105 朱顾 44 男
2014010106 胡雨 35 女
2014010107 刘希 30 男
2014010108 孙宇 45 女
2014010109 谷雨 33 男
2014010110 科宇 45 女





関連ラベル：
変色
ソース：php.cn
前の記事：JavaScript でのタイマーの使用例_javascript のヒント 次の記事：Android の jQuery: AQuery_jquery の概要
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1361
URL パラメータから取得した PHP 配列が期待どおりに動作しない カテゴリ ID を含む URL パラメータがあり、それを次のような配列として扱いたいと考えています: http://example.com?cat[]=3,9,13 PHP では、...
から 2024-04-06 22:09:02
0
1
1428
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
ApacheのどこにCustomLogディレクティブを配置すればよいですか 私はphp:7.2-apachedockerを使用しています。ヘルスチェック URL ログイン アクセス ログを無効にする必要があります。このリンクに基づいて、Customlog ...
から 2024-04-06 22:03:59
0
1
990
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート