- ベストアンサー
jQuery.eachの使い方について教えてください
- テーブルの行に触れたとき背景色を変更する方法を教えてください。
- 1行に触れたら2行の色を変更させる方法を教えてください。
- 配列を使用して複数の行を一度に選択する方法を教えてください。
- mr-r00
- お礼率93% (480/516)
- JavaScript
- 回答数3
- ありがとう数14
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
２行が１セットである事に意味があるならtbodyで括っちゃえば？ <tbody> <tr>～～</tr> <tr>～～</tr> </tbody> <tbody> <tr>～～</tr> <tr>～～</tr> </tbody> $('tbody').hover(～ それとも実際にはもっと複雑で行ごとにidを振らなければ実現できないような構成？
お礼
うまいことできました ありがとうございます
- babu_baboo
- ベストアンサー率51% (268/525)
ごめん！つくってからきづいた！「jQuery.eachの使い方」じゃなくてもだいじょうぶ？ <!DOCTYPE html> <title></title> <bod> <table border="1"> <tr><th>abc</th><td>def</td></tr> <tr><th>abc</th><td>def</td></tr> <tr><th>abc</th><td>def</td></tr> <tr><th>abc</th><td>def</td></tr> <tr><th>abc</th><td>def</td></tr> <tr><th>abc</th><td>def</td></tr> <tr><th>abc</th><td>def</td></tr> <tr><th>abc</th><td>def</td></tr> </table> <script type="text/javascript"> //@cc_on document. /*@if(@_jscript_version > 5.8) addEventListener( @elif (@_jscript_version <= 5.8) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'mousemove', (function( getp ) { var tr0,tr1; return function( e ) { var n = e./*@if(1)srcElement@else@*/target/*@end@*/; var tr = getp(n,'nodeName','TR'); var b,tb; tr0 && (tr0.backgroundColor = '#fff', tr0 = null); tr1 && (tr1.backgroundColor = '#fff', tr1 = null); if(tr) { tb=getp(tr,'nodeName','TABLE'); b = (tr.rowIndex / 2 |0) * 2; (tr0 = tb.rows[b].cells[0].parentNode.style ).backgroundColor = '#ff47a3'; (tr1 = tb.rows[b+1].cells[0].parentNode.style ).backgroundColor = '#ff47a3'; } }; })(function(n,t,v){ return n?v==n[t]?n:arguments.callee(n.parentNode,t,v):null; }),false); </script>
お礼
ちょっと私にはまだ難しい部分もありますが参考にさせていただきます ありがとうございました
関連するQ&A
- 元の色に戻すには？
一行おきに青色を付けているテーブルに対して、マウスカーソルを当てた場合、アクティブな行は赤にしたいのですが、 その後、マウスが離れたら元の色に戻したいのですが、 元の色に戻すにはどうすればいいですか？ --------------------------------------------------------- <style type="text/css"> tr.color_Yes{background-color: blue; } </style> <body> <table border=1 id="Active_row_Color"> <tr class="color_Yes"><td>セル1</td><td>セル2</td></tr> <tr><td>セル3</td><td>セル4</td></tr> <tr class="color_Yes"><td>セル5</td><td>セル6</td></tr> <tr><td>セル7</td><td>セル8</td></tr> <tr class="color_Yes"><td>セル9</td><td>セル10</td></tr> </table> --------------------------------------------------------- これで、1行おきにテーブルの行全体が青になります。 さらに --------------------------------------------------------- <script type="text/javascript"> <!-- firstcolor="White"; nextcolor="red"; 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> --------------------------------------------------------- と --------------------------------------------------------- <script>table_row("Active_row_Color")</script> --------------------------------------------------------- を追加することで、マウスカーソルをあてた行が赤になるのですが マウスカーソルが離れると白になってしまいます。 それは --------------------------------------------------------- firstcolor="White"; と tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; --------------------------------------------------------- が原因だと思いますが、 では、もともと青色の行の場合は、マウスカーソルが離れた場合、どうやって青に戻せばいいのでしょうか？ 現在の行の背景色を取得して、それをどこか変数に格納し、元に戻すことは可能ですか？ 添付画像は、一番下の行にマウスカーソルをあてた状態です。
- 締切済み
- JavaScript
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- CSSについて教えて下さい
CSSについて教えて下さい。 ↓下記はどのような意味になりますでしょうか。 .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #550055; color: #eeeeee; }
- ベストアンサー
- CSS
- bgcolorとbackground-color
タグ打ちで、bgcolorとbackground-colorは一緒ですか？？ 一緒として話しを進めます。 <table> <tr><td bgcolor="#e1e1e1"></td></tr> <tr><td bgcolor="#d1d1d1"></td></tr> </table> なら、セルの色を変更出来ましたが、 <table> <tr><td background-color="#e1e1e1"></td></tr> <tr><td background-color="#d1d1d1"></td></tr> </table> だと、セルの色を変更できません。 なぜですか？？ bgcolorとbackground-colorは違うのですか？？使う場所がそれぞれ決まっているとか？？ 気になってます。教えて下さい。
- ベストアンサー
- ブログ
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、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のラジオボタン操作系サンプル探してます
jQueryをペチペチと勉強していますが、ちょっと詰まってしまいました。 以下のような動作をするサンプルプログラムを探しています。 「ラジオボタンを押下すると、それに対応するテーブルのtr要素の背景色を変更する。」 ==========ソースここから========== <table border ="1"> <tr id ="0" class ="table_1"> <td>hoge1</td><td>hoge1</td><td>hoge1</td> </tr> <tr id ="1" class ="table_1"> <td>hoge2</td><td>hoge2</td><td>hoge2</td> </tr> <tr id ="2" class ="table_1"> <td>hoge3</td><td>hoge3</td><td>hoge3</td> </tr> </table> <table border ="1"> <tr> <td><input type ="radio" name ="radio_hoge" value ="100" id ="0" class ="radio_1"></td><td>hoge1</td> </tr> <tr> <td><input type ="radio" name ="radio_hoge" value ="200" id ="1" class ="radio_1"></td><td>hoge2</td> </tr> <tr> <td><input type ="radio" name ="radio_hoge" value ="300" id ="2" class ="radio_1"></td><td>hoge3</td> </tr> ==========ソースここまで========== HTMLの構成はこんな感じにしてあります。 下側のテーブル内のラジオボタンを押下すると、上側のテーブルのtrの背景色を変更したいのですが、指定の方法が分からず悩んでいます。 （trとradioは、同一「id」値と対応する。ものとしたい。 現状、他に実現してある内容は ・tr行にマウスオーバーすると、trの色を変える ・tr行をクリックすると、trの色を変えて保持する ・tr行をクリックすると、対応するラジオボタンを選択する です。 コレに、 ・ラジオボタンを選択すると、対応するtr行の色を変える を追加したく思っています。 当面の問題は、tr(のid？)に対して「this」以外で指定を行う方法が分からない。 ということかと思っています。 コレ(trに対してthis以外で指定)が分かれば、もう一つやろうとしてる、tr行でクリックした以外のtr行の色を初期色に戻す。 あたりも解決すると思っているので、ご存じの方がいましたら、教えていただけると助かりますm(_ _)m 以下は、現状実現してある内容～の参考にしたサイトです。 >>・tr行にマウスオーバーすると、trの色を変える http://1bit.mobi/20120313111043.html >>・tr行をクリックすると、trの色を変えて保持する http://ponk.jp/jquery/basic/state_save の「４」番目 >>・tr行をクリックすると、対応するラジオボタンを選択する http://www.tohoho-web.com/lng/199912/99120188.htm よろしくお願いします。
- ベストアンサー
- AJAX
- クリックするとテーブルの列の背景色が変わる／元に戻る
このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる という動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。 現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript"> <!-- function bgcolor(idName){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = "#EE3300"; } } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30"> </TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>
- ベストアンサー
- JavaScript
- テーブルの中のリンクにつく枠を消したい
ブログのカレンダーです。背景色のテーブルの中のリンク文字の周りに白い枠線ができてしまいます。枠線の取り方をご教授ください＞＜ ＊HTML＊ <table border="0" cellspacing="1" bgcolor="#ddd"> <tr><td id="calendar_${CALENDAR_CODE}"></td> </tr></table> ＊CSS＊ #calendar table {width: 698px;margin: 0px auto;background: #000000;color: #FFFFFF;} #calendar td {text-align: center;color: #ffffff;} #calendar td a {background: #000000; color: #FFFFFF;} #calendar td a:hover,#calendar td a:active {background: #888888;color: #FFFFFF;}
- 締切済み
- HTML
- jQueryのforとeachの変数参照の違い
jQueryを学習中の者です。 現在、パララックス効果のサンプルコードを参考にしているのですが、理解できずに困っています。 その内容は各ブロック要素をeachでループさせ、ループの中でウインドウのスクロールイベントを登録しコールバック関数で細かい設定をしていくというものです。 理解できないというのは、以前 ｊavasctiptでのfor文による要素へのイベント登録で「イベントでも渡す関数は参照のみです。新たに関数を自動で作成してくれるような事は決してありません。」と説明が有り、コールバック関数内に変数を使うとイベント発生時に変数を参照した時、ループの最後で格納した値になるので、この事は理解し注意もするようにしていました。 しかし、今回のサンプルコードではforとeachの違いはあるけれど、コールバック関数に変数を使っているのに、その変数が別々の値を持っています。 最初はjQueryとjavascriptの挙動の違いかなと思い、以前のfor文のコードを下の様にjQueryで書き替えても結果は一緒でした。 取り留めの無い文章になってしまいましたが、どうして下の２つコードが違う結果になるのかを解り易く説明していただけませんでしょうか。 <table border="1"> <tr><td></td><td></td>...</tr> ... </table> <script> (1)//これだと、駄目…どのtdのイベントでも最後のtdが反応 $(function(){ for(var i =0 ,len=$('td').length;i < len; i++){ var td=$('td').eq(i); td.mouseover(function(){ td.css('background-color','red');}); td.mouseout(function(){ td.css('background-color','');}); } }); (2)//これだとOK…ちゃんと各tdが反応する。 $(function(){ $('td').each(function(index,elem){ var td=$(elem); td.mouseover(function(){ td.css('background-color','red');}); td.mouseout(function(){ td.css('background-color','');}); }); }); </script> ＊今回の質問はどう対処したら良いのかという類ではありません。 両方とも変数 td にjqueryオブジェクトを格納して、同じ形式でイベント登録しているのに違う結果になるという事が壁に成ってます。 ネットでいくら調べても構文の説明やサンプルコードは溢れていますが、この様な事例に触れた物が皆無です。 forとeachの違いなんて基本的なことで恥ずかしいのですが、お願いします。
- ベストアンサー
- JavaScript
お礼
これでも大丈夫でした ありがとうございます