- ベストアンサー
テーブル行にCSSを使用してJavaScriptを短くする方法
- JavaScriptを使用してテーブル行にクラスを追加するための効果的な方法を探しています。
- テーブル行のHTMLコードを短くするために、JavaScriptを使用してCSSクラスを追加する方法を教えてください。
- テーブル行のHTMLコードを簡潔にするために、JavaScriptを使用してクラスを追加する方法を教えてください。
- php4
- お礼率42% (373/888)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- 列もハイライト
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ハイライト(JavaScript)</title> </head> <body> <script type="text/javascript"> <!-- function hightlight(target, color){ target.style.backgroundColor = color; } //--> </script> <table border="1" style="border-collapse:collapse"> <tr><th>氏名</th><th>日付</th></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒1</td><td>2005/04/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒2</td><td>2004/02/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒3</td><td>2004/10/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒4</td><td>2004/08/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒5</td><td>2005/06/01</td> </table> </body> </html> で行にハイライトを設定しているのですが、同時に列にも同じようにハイライトを設定したいと思っております。 どのように変更したらよいでしょうか？ ご存知の方、宜しくお願いします。
- ベストアンサー
- JavaScript
- エクセルVBAでのWeb画面の操作方法について
現在エクセルVBAでWeb画面（社内イントラネット）を、navigateを使って開くところまではできております。 しかし、開いた画面で、「イメージ」という個所をクリックさせる方法がわかりません。 HTMLはほとんどわからないのですが、ソースを見ると、多分このあたりだとおもいます。 <tr><td colspan="2"> </td></tr><tr><td colspan="2" id="ImageButton" class="Button" onclick="toImage(this, 'INTRA');" onmouseover="BigOn(this);" onmouseout="BigOff(this);">イメージ</td></tr><tr><td colspan="2" id="KakoButton" class="Button" onclick="toKako(this, 'INTRA');" onmouseover="BigOn(this);" このうち、多分、onclick="toImage(this, 'INTRA');" を実行させればいいのではないかと想像します。 どのような記述になるのか、ご教示いただけましたら幸いです。
- ベストアンサー
- その他MS Office製品
- 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
- onmouseoverはCSS参照に含められるか？
<div style="color: blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">あああ</div>を、 <style type="text/css"> <!-- div { onmouseover="this.style.color='red'"; onmouseout="this.style.color='blue'; } --> </style> みたいには書けませんか？ a:hoverだったらできるのは承知していますが、 タグが<a>でなく<div>なので、onmouseover、onmouseoutを使わざるを得ず、 さらにonmouseover、onmouseoutはCSSでなくJSだと思うのですが。
- ベストアンサー
- CSS
- javascript オセロ
javascriptでオセロを作ろうと思っています。 初めに「クリックしたtdタグの背景色を、クリック数が奇数回なら白、偶数なら黒にする」コードを書きたいのですが、 変数とthis(クリックされたtdタグ)の使い方がいまいち分かりません。 ご教授いただければと思います。 <!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> </head> <style type="text/css"> * { margin: 0; padding: 0; } td { width: 100px; height: 100px; } .green { background-color:#093; } .black { background-color:#333; } .white { background-color:#CCC; } </style> <body> <table> <tr> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> <tr> <td class="green" onClick="osero(this)"></td> <td class="black" onClick="osero(this)"></td> <td class="white" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> <tr> <td class="green" onClick="osero(this)"></td> <td class="white" onClick="osero(this)"></td> <td class="black" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> <tr> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> <td class="green" onClick="osero(this)"></td> </tr> </table> <script type="text/javascript"> <!-- c_count = 0;//tdをクリックした回数 //tdクリックで黒 function kuro(i){ document.i.style.backgroundColor = "#333"; c_count=c_count++ } //tdクリックで白 function siro(i){ document.i.style.backgroundColor = "#ccc"; c_count=c_count++ } //クリック交互に黒白 function osero(i){ if(c_count % 0){ siro(i); }else{ kuro(i); } } --> </script> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- 元の色に戻すには？
一行おきに青色を付けているテーブルに対して、マウスカーソルを当てた場合、アクティブな行は赤にしたいのですが、 その後、マウスが離れたら元の色に戻したいのですが、 元の色に戻すにはどうすればいいですか？ --------------------------------------------------------- <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
- 特定のHTML箇所をJavaScriptのdocument.write("");で表示させたい
外部JS化する前のテスト段階で、特定のHTML箇所をJSで表示させるにあたり、エラーになってしまいます。 下記部分 -------------------------------------------------- <li class='off' onmouseover="this.className='on'" onmouseout="this.className='off'" title='テスト'><A href='./test.html'>テスト</a> -------------------------------------------------- を下記のようにしてみているのですが、 -------------------------------------------------- document.write("<li class='off' onmouseover="+this.className='on'+" onmouseout="+this.className='off'+" title='テスト'><A href='./test.html'>テスト</A>"); -------------------------------------------------- FireFoxのエラーコンソールで確認すると this.className= --------------↑ の、=の後の部分が指摘されております。 どのようにすればエラーを回避出来ますでしょうか。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascript でテーブル操作
javascriptのdeleteRowで削除したテーブルの行を再表示する方法を探しております。 下記ソース内reload.gifをクリックするとdeleteRowで消えた行をまとめて表示したいのですが何か良い方法は無いでしょうか？ (＊)ブラウザの再表示は使えません。 <html> <head> <title></title> <script language="JavaScript" type="text/JavaScript"><!-- function Delline(tablename,num){ document.getElementById (tablename).deleteRow(num); } //--></script> </head> <body> <img src="reload.gif"> <table id="table1"> <tr onmouseover="asrow1 = this.rowIndex"> <td class="ChkTD41">ああ<img src="del.gif" onclick="Delline('table1',asrow1)" /> <input type="text" name="a1"> </td> </tr> <tr onmouseover="asrow2 = this.rowIndex"> <td class="ChkTD41">いい<img src="del.gif" onclick="Delline('table1',asrow2)" /> <input type="text" name="b1"> </td> </tr> <tr onmouseover="asrow3 = this.rowIndex"> <td>うう<img src="del.gif" onclick="Delline('table1',asrow3)" /> <input type="text" name="c1"> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックス設定の方法教えてください
チェックボックスの設定方法を教えてください。 項目1.大分類にチェックすると中分類と小分類にもチェックが入る。 項目2.中分類にチェックすると小分類にもチェックが入る。 項目2の設定はわかりますが、項目1の設定がどうしてもできません。 <script language=javascript> function allCheck(obj){ f=obj.form num=obj.name.replace("b","") for(var i=0;i<f.length;i++){ if(f[i].name=="s"+num) f[i].checked=obj.checked; } } </script> <FORM> <TABLE border=0> <TBODY> <TR> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>大分類</TD> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>中分類</TD> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1 rowSpan=3><INPUT onclick=allCheck(this) type=checkbox name=b2>中分類 <P></P></TD> <TD class=color_1><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR></TBODY></TABLE></FORM> すいませんが、教えて下さい。
- ベストアンサー
- JavaScript
- HTML罫線の行にmouseoverで行全体の背景色を変えるスクリプト
罫線の行<tr>～</tr>に、マウスが乗ると ハイライトされるような仕組みのサンプルプログラム使い、 具体的には、こうして、highlight.htcを呼び出しています。 <tr style='behavior:url(highlight.htc);'> ◆質問◆ ところが、↓のようにすると、 (1) Ａにカーソルを乗せる⇒Ａ、Ｂにハイライト (2) Ｂにカーソルを乗せる⇒Ｂだけにハイライト (3) Ｃにカーソルを乗せる⇒Ｃだけにハイライト となりますが、(1)のケースでもＢだけにハイライトを当てる （＝セルＡにだけは常にハイライトをあてない） ようにするのはどうしたらよいでしょうか。 よろしくお願い致します。 <table> <tr style='behavior:url(highlight.htc);'> <td rowspan="2"></td> <td></td> </tr> <tr style='behavior:url(highlight.htc);'> <td></td> </tr> </table> ┏━┳━┓ ┃ ┃Ｂ┃ ┃Ａ┣━┫ ┃ ┃Ｃ┃ ┗━┻━┛ -----------------------------highlight.htc <script type="text/javascript"> <!-- attachEvent("onmouseover", detailTr_onmouseover); attachEvent("onmouseout", detailTr_onmouseout); function detailTr_onmouseover() { this.style.backgroundColor='#000000'; } function detailTr_onmouseout() { this.style.backgroundColor='transparent'; } --> </script> ------------------------------
- ベストアンサー
- JavaScript
お礼
setPointer関数はphpMyAdminというフリーソフトにあるjavascriptの関数で長くて貼り付けられそうませんでした。行に色を塗ったり塗らなかったりします。 教えていたただいた方法で １．getElementsByTagName('*')の*をtrに ２．this, 0,をthis, i, ３．下記のようにHTMLを３行に <tr class="line_color"><td>テスト</td></tr> <tr class="line_color"><td>テスト</td></tr> <tr class="line_color"><td>テスト</td></tr> してみましたのですが、 クリックした行がオレンジ色に変わるのですが、 最初にクリックした行しか色が変わりませんでした。惜しいです。 でも、こういう書き方があるんだというのことが わかっただけでも大変参考になりました。 ありがとうございます。