jqueryでテーブル行のマウスアウト時の動作
- jqueryを使用してテーブル行のマウスアウト時の動作を実装する方法について教えてください
- マウスオーバー、マウスアウトした時にテーブル行の背景色が変更されるようにするためのjqueryのコードを書いていますが、正しく動作しません。どこが問題なのでしょうか？
- また、マウスアウト時に色が変わった行の行番号やオブジェクトを取得する方法についても教えてください
- ベストアンサー
jqueryでテーブル行のマウスアウト時の動作
jqueryでテーブル行をマウスオーバー、マウスアウトした時に行の背景色が 変更されることを期待して下記のようなサンプルを作成してみました。 マウスアウトした時に背景色が変わるようにサンプルを書いて見ましたが 変わりませんでした。どこが悪いかお分かりになりますでしょうか。 また、下記サンプルでマウスアウトした時に色が変わった行の行番号、及び行のオブジェクトを 取得するにはどう記述すればよろしいでしょうか。 <html> <head> <meta charset="UTF-8" /> <title>属性フィルター</title> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { alert("a"); $("table tr").mousout( function() { alert("c"); $(this).css("background-color", "red"); } ); }); </script> </head> <body> <table border="1"> <tr> <td>aiueo</td> </tr> <tr> <td>kakikukeko</td> </tr> <tr> <td>sasisuseso</td> </tr> <tr> <td>tatituteto</td> </tr> </table> </body> </html>
- unko347
- お礼率44% (121/273)
- JavaScript
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
以下のスクリプトで動きます： $("table tr").mouseout(function() { var rowNumber = $(this.parentNode).find("tr").index(this); $(this).css("background-color", "red"); }); rowNumber が行番号、this がその行のオブジェクトです。 あなたのコードでは "mouseout" であるべきところが "mousout" になっています。 それが動かない原因です。 これくらいのエラーはコンソールを開いて自力で確認しましょう。
関連するQ&A
- マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- jQueryでテーブル行の表示・非表示
JavaScript・jQueryでテーブル行(trタグ)の表示・非表示を 切り替えるスクリプトを以下のように作成しましたが うまく動きません。 dispChg()内で 非表示に設定したクラス名(hid)を追加し 全行を非表示にできていますが 次の該当trから 非表示に設定したクラス名(hid)の削除がうまくいかないようです。 JavaScriptの引数からクラス名を引き継げないのでしょうか。 どなたか修正できる方がいらっしゃいましたら 教えてください。 よろしくお願いいたします。 <html> <head> <title>test</title> <style type="text/css"> <!-- .hid { display:none } --> </style> <script src="jquery-1.2.6.pack.js" type="text/javascript"></script> <script type="text/javascript"> <!-- function dispChg(trClass){ /* まず全行を非表示 */ $('tr[class]').addClass('hid'); /* 該当の行を表示 */ $('tr[class*=trClass]').removeClass('hid'); } --> </script> </head> <body bgcolor=#ffffff topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> <input type="button" value="全部表示" onclick="dispChg('atype btype ctype dtype')"> <input type="button" value="a" onclick="dispChg('atype')"> <input type="button" value="b" onclick="dispChg('btype')"> <input type="button" value="c" onclick="dispChg('ctype')"> <input type="button" value="d" onclick="dispChg('dtype')"> <table border="1"> <tr class="atype"><td>a</td></tr> <tr class="btype"><td>b</td></tr> <tr class="ctype"><td>c</td></tr> <tr class="dtype"><td>d</td></tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- jQuery、tdマウスオーバー、行の先頭th操作
jQueryについて質問です。 <!DOCTYPE html><html><head> <style type="text/css"> th.e {background-color:orange;} </style> </head><body> <table border='1' cellspacing='0'> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $("table td").mouseover(function(){ $(this).parent().find("th").toggleClass("e"); }).mouseout(function(){ $(this).parent().find("th").toggleClass("e"); }); </script> </body></html> 上記で動いて嬉しかったのですが、もやもやしています。 this → parent → find が遠回りでスカッとしません。 スカッとする方法はありますか？
- 締切済み
- JavaScript
- テーブル行のクリックでチェックボックスの制御
テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを 制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまく チェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、 同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのでは ないかと思われます。 チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>
- 締切済み
- JavaScript
- テーブルの行操作について
下記のJavaScriptの操作で質問があります。 ボタンを押すたびに1行目が最後に追加されていくと考えたのですが、 実際の動作では1行目が複製されず、行の入れ替えになってしまいます。 cloneNodeすれば行の追加になるのはわかりますが、なぜ下記の操作で行の入れ替えになるのでしょうか？ <html> <head> <title>テーブルテスト</title> <script type="text/javascript"> <!-- function testFunction() { tableBody.appendChild(tableBody.childNodes(0)); } --> </script> </head> <body> <table border="1"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody id="tableBody"> <tr><td>foo</td><td>bar</td><td>hoge</td></tr> <tr><td>abc</td><td>def</td><td>ghij</td></tr> </tbody> </table> <input type="button" value="テスト" onclick="testFunction()" /> </body> </html>
- ベストアンサー
- JavaScript
- IEでjQueryのtoggleが動作しません。
IEでjQueryのtoggleが動作しません。 inputをクリックすることで同じクラス名が与えられている 行を非表示／表示の切替えを行なおうとしています。 FireFox,Safariその他のブラウザでは正常に動作します。 スクリプトの記述に誤りがあるのでしょうか？以下ソースです。 ■JavaScript <script type="text/javascript"> $(document).ready(function(){ $("#sets input").click(function () { var trshow = $(this).attr("class"); $("tr"+"."+trshow).toggle(); } ); }); </script> ■HTML <table id="sets"> <tr> <td>0001 ああああ<br /> <input type="button" class="set01" value="セット内表示/非表示" /></td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr> <td>0002 いいい<br /> <input type="button" class="set02" value="セット内表示/非表示" /></td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> </table> ■CSS .set { display: none; }
- ベストアンサー
- JavaScript
- IE8でjQueryのtoggleが動作しません。
IE8でjQueryのtoggleが動作しません。 inputをクリックすることで同じクラス名が与えられている 行を非表示／表示の切替えを行なおうとしています。 同様の内容を、 http://okwave.jp/qa/q6117684.html で質問し、IE7とIE8の互換モードでは動作できるようになりました。 metaタグで強制的に互換モードにする以外に 対処法がありましたら教えてください。 ■JavaScript <script type="text/javascript"> $(document).ready(function(){ $("#sets input").click(function () { var trshow = $(this).attr("className"); $("tr"+"."+trshow).toggle(); } ); }); </script> ■HTML <table id="sets"> <tr> <td>0001 ああああ<br /> <input type="button" class="set01" value="セット内表示/非表示" /></td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr> <td>0002 いいい<br /> <input type="button" class="set02" value="セット内表示/非表示" /></td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> </table> ■CSS .set { display: none; }
- ベストアンサー
- JavaScript
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、rowspanを使用すると、rowspanが別の行 扱いになり、バックカラーが変えられなくなってしまいました。 一緒にしたい場合どうしたら良いでしょうか。 もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"><!-- firstcolor="#ffffff"; //初めの色 nextcolor="#eeeeee"; //変更後の色 function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } }// --></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ベストアンサー
- JavaScript
- jQuery.lightpop.jsの動作について
jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。 現在弊社ではjQuery.lightpop.jsライブラリを使用して リンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。 以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず 普通にページ遷移してしまいます。原因はどこにあるのでしょうか？？ ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>
- ベストアンサー
- JavaScript
- jQuery 動的にボタンが増えた時
<html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト１" /> <input class="button_cls_2" type="button" value="テスト２" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時に どのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。
- ベストアンサー
- JavaScript
補足
ご回答ありがとうございます。 無事やりたいことが実現できました。