Javascriptでwebテーブルにカーソルを載せると説明文を表示するプログラムの作成方法

前へ 次へ
このQ&Aのポイント
  • Javascriptを使用してwebテーブルにカーソルを載せると説明文を表示するプログラムを作成したい場合、以下の手順に従って実装します。
  • まず、HTMLのテーブル要素内のtr要素にonmouseoverおよびonmouseoutのイベントリスナーを追加します。
  • イベントリスナー内で、説明文が表示される要素のdisplayスタイルを変更します。カーソルを載せた時にはdisplayを'block'にし、外した時には'display'を'none'に設定します。
回答を見る
  • ベストアンサー

Javascript　web テーブルにカーソルを載せると、説明文を表示するプログラム

タイトルの通りのプログラムを作ったのですが、ファイルを開いた時から説明文が表示されてしまいます。開いた時に表示されなくするには、どのようにすればよいのでしょうか？ ソースは↓になります。よろしくお願いいたします。 <html> <head> <script type="text/javascript"> <!-- function display_INIT() { document.getElementById('discript01').style.display='none'; } function display_ON(itm) { if(itm == 1) { document.getElementById('discript01').style.display='block'; } } function display_OFF(itm) { if(itm == 1) { document.getElementById('discript01').style.display='none'; } } // --> </script> </head> <table> <tr onmouseover="display_ON(1)" onmouseout="display_OFF(1)"> <td width="16%" align="center" bgcolor="EBEBEB" nowrap>test </td> <td width="16%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> </tr> <tr id="discript01"> <td colspan="6">（只今テスト中） </td> </tr> </table> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • venzou
  • ベストアンサー率71% (311/435)
回答No.1

予め非表示にしておくのが簡単だと思います。 <tr id="discript01" style='display=none;'> <td colspan="6">（只今テスト中） </td> 別回答 display_INIT() と言う関数が用意してあるので、 bodyタグのonloadでそれを呼ぶ手もあります。 <body onload="display_INIT()"> #質問のソース、bodyタグが抜けてますよ（＾＾；

blackVC
質問者

お礼

ありがとうございます。昨日一日悩んでいたので、非常に助かりました。また、ご縁がありましたらよろしくお願いいたします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • TABLEの行を非表示にした際の隙間

    テーブルの行をクリックアクションにて開閉したいのですが、 開いたテーブルを閉じた際に隙間ができてしまいます。 これはIE6で発生し、FireFox3では隙間無く閉じています。 IE6でも、この隙間を無くすことは可能でしょうか？ ご教授願います。 現状のスクリプトは以下のようにしています。 （クリックするのは左上のプラス／マイナスの画像です） <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <TITLE></TITLE> </HEAD> <BODY> <script type="text/javascript"> function close_list(){ document.getElementById("img").src = '../images/plus.gif'; document.getElementById("img").onclick = new Function(" open_list(); "); document.getElementById("mark").rowSpan = '1'; document.getElementById("tr_yuubin").style.display = 'none'; document.getElementById("tr_ken").style.display = 'none'; document.getElementById("tr_stat").style.display = 'none'; return; } function open_list(){ document.getElementById("img").src = '../images/minus.gif'; document.getElementById("img").onclick = new Function(" close_list(); "); document.getElementById("mark").rowSpan = '5'; document.getElementById("tr_yuubin").style.display = ''; document.getElementById("tr_ken").style.display = ''; document.getElementById("tr_stat").style.display = ''; return; } </script> <FORM> <TABLE width="755" border="1"> <TBODY align="left"> <TR> <TD width="15" align="center" id="mark" valign="top"><img name="img" id="img" src="../images/plus.gif" onclick="open_list()"></TD> <TD width="135" >タロウ </TD> <TD width=""> <INPUT type="checkbox" id="chk" name="chk" value="1">登録 </TD> </TR> <TR id="tr_yuubin" style="display: none;"> <TD width="135">郵便</TD> <TD><input name="yuubin" type="text" id="yuubin" style="width:150px" ></TD> </TR> <TR id="tr_ken" style="display: none;"> <TD width="135">都道府県</TD> <TD> <select style="width:400px"><option> </select> </TD> </TR> <TR height="20" id="tr_stat" style="display: none;"> <TD width="135">ステータス</TD> <TD>　</TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

  • JavaScriptでの表の行の表示・非表示の切り替え

    現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。 テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "test1"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "test1"){ if(document.getElementById){ document.getElementById("test1").style.display = "none"; } } } // --> </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト１</option> <option value="test2">テスト２</option> <option value="test3">テスト３</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p>&nbsp;</p> </td> <td width="217"> <p>&nbsp;</p> </td> </tr> </table> <div id="test1" style="display:none;"> （本来はここに2行追加したい） </div> </body> </html>

  • dreamweaverで、テーブルのボーダーカラーに入力しても、表示されません。

    プロの方に作っていただいたHPを書き換えていて、 テーブルのボーダーカラーを指定しようとしているのですが、 コードから何回もボーダーカラーを指定しているのに、 色がまったく表示されません。 </table> <table width="500" height="118" border="2" align="center" cellpadding="5" cellspacing="2" bordercolor="#000000"> <tr> <td width="131" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> <td width="205" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> <td width="114" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> </tr> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> <tr> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●<br> ●●● </div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> </tr> </table> 新しいページに、以上のコードをペーストすると、ちゃんと表示されます。 スタイルシートやCSSで指定してあって、それが優先されているのでしょうか？ スタイルシートやCSSは使ったことがないのですが、 それを解除するには、どうすれば良いでしょうか？ よろしくお願いいたします。

  • TABLEの特定の行にスクロールバーをつけたい

    横に5個、縦に100個のテキストボックスを用意し、上下に切ったフレームの下画面に表示させ、入力していくページを作っています。 このテキストボックスを5×100のテーブルにしているのですが、 最初の1行を入力項目名に、下から3行ほどを入力値計算結果にしているため、 間の2～97行だけをスクロールさせたいと考えています。 特定の行だけスクロールバーをつけるということはHTMLでできるのでしょうか。 以下ソースです。 <% dim i i=0 %> <table border=1> <tr> <td width=70 align=center bgcolor="#e6e6fa">A</td> <td width=200 align=center bgcolor="#e6e6fa">B</td> <td align=center bgcolor="#e6e6fa">C</td> <td align=center bgcolor="#e6e6fa">D</td> <td align=center bgcolor="#e6e6fa">E</td> </tr> <% do while i<=99 %> <tr> <td align=center><input type="text" maxlength=6></td> <td align=center><input type="text"></td> <td align=center><input type="text"></td> <td align=center width=40><input type="text"></td> <td align=center width=40><input type="text"></td> </tr> <% i=i+1 loop %> <tr> <td rowspan="3" colspan="3"></td> <td align=center bgcolor="#e6e6fa">結果(1)</td> <td align=center><input type="text"></td> </tr> <tr> <td align=center bgcolor="#e6e6fa">結果(2)</td> <td align=center><input type="text"></td> </tr> <tr> <td align=center bgcolor="#e6e6fa">結果(3)</td> <td align=center><input type="text"></td> </tr> </table> このループ間のテーブル行にスクロールバーをつけたいのです。 長々とすみません。 どなたかご存知の方、お願いします・・・。

  • 『オンマウスで説明文を表示』について

    http://lll.s21.xrea.com/m/link/38.html こちらのURLのタグを参考にしてやってみたところ、背景が半透明になってしまうのです。 すぐ上やすぐ下に文字が書いてあるので、ごちゃごちゃになって見えなくなってしまいます。 色々いじってみましたが、どうも上手くいきません。 どなたか、何処をどう変更するのか教えて頂けませんか？ お願いします。 使用タグ↓ <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> <A HREF="○○.html" onmouseover="up('文章...')"; onMouseout="kes()">テストページ</A> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> <TABLE BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#FFE0E0"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV>

  • 【ツリーメニューの保持】

    【ツリーメニューの保持】 １．フォーム内の「タイプ」のラジオボタンをどれか1つ選択すると該当のツリーメニューが表示される 2．・必要項目を入力し、form送信、POSTで受け取る。 3.・form送信後も表示されていたツリーメニューを保持 ということを実装したいと思っています。 javascriptは初心者で、ネットで調べてつくりました。 「ラジオボタン選択でツリー表示」はできましたが 「form送信後も表示されていたツリーメニューを保持」部分が実装できません。 一人ではどうしても解決できず、どなたかご教授いただけませんでしょうか？ よろしくお願い致します。 ------------------------------------------------------------------------------ 【php】 if($_REQUEST["mode"] == "regist") { var_dump($_REQUEST); } 【javascript】 //送信後もツリーメニュー保持 function check() { if (document.fm.type[0].checked == true) { document.getElementById('A').style.display = "block"; } else if(document.fm.type[1].checked == true) { document.getElementById('B').style.display = "block"; } } //ラジオボタン選択でツリーメニュー表示 function treeMenu(tName) { radio = document.getElementsByName('type') if(radio[0].checked) { document.getElementById('A').style.display = "block"; document.getElementById('B').style.display = "none"; } else if(radio[1].checked) { document.getElementById('A').style.display = "none"; document.getElementById('B').style.display = "block"; } 【form】 <form action="hogehoge.php" method="post" name="fm"> <input type="hidden" name="mode" value="regist"> <table> <tr> <td>タイプ</td> <td> <input type="radio" name="type" value="1" onClick="treeMenu('A')"> <input type="radio" name="type" value="2" onClick="treeMenu('B')"> </td> </tr> </table> <div id="A"> <table> <tr> <td>住所</td> <td><input type="text" name="address" value="<?php echo $_REQUEST[address]?>"></td> </tr> </table> </div> <div id="B"> <table> <tr> <td>電話番号</td> <td><input type="text" name="tel" value="<?php echo $_REQUEST[tel]?>"></td> </tr> </table> </div> <table> <tr> <td>年齢</td> <td><input type="text" name="age" value="<?php echo $_REQUEST[age]?>"></td> </tr> </table> <input type="submit" value="確認" onclick="check()"> </form>

  • Javascriptで自動計算の合計の式でエラー

    度々すみません。 前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。 色々調べてみたのですが、この現象の原因がよくわかりません。 何かエラーがあるのでしょうか。 お知恵を貸して頂けると嬉しいです。 宜しくお願いします。 ＜スクリプト＞ <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> ＜HTMLソース＞ <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'>&nbsp;</td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>

  • Javascriptによるフォームの選択表示について教えてください。

    Javascriptによるフォームの選択表示について教えてください。 概要としてはカートCGIのお客様情報入力欄のカスタマイズを行なっています。 別の場所への発送を希望される場合において(1)、(2)、(3)のラジオボタンを作り、それぞれ選択によって該当のフォームを表示するところまではできました。 問題は、(1)→１箇所、(2)→３箇所、(3)→５箇所とフォームを作ったところ、入力ページが表示された時点で(1)(2)(3)全ての表示がされた状態で表示されます。 ちなみに、その際にラジオボタンを選択すると(1)(2)(3)それぞれに対応したフォームが表示され切り替わります。 実際にやりたいことは、ページが表示された時点で(1)のフォームのみ表示されるようにし、(2)(3)とラジオボタンを選択された際にそこで初めて(2)(3)のそれぞれのフォームを表示したいと思っています。 以下はソースです。 ■Javascript <script type="text/javascript"> function func1() { document.getElementById("sele1").style.display="inline"; document.getElementById("sele1").disabled=false; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func2() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="inline"; document.getElementById("sele2").disabled=false; document.getElementById("sele3").style.display="none"; document.getElementById("sele3").disabled=true; } function func3() { document.getElementById("sele1").style.display="none"; document.getElementById("sele1").disabled=true; document.getElementById("sele2").style.display="none"; document.getElementById("sele2").disabled=true; document.getElementById("sele3").style.display="inline"; document.getElementById("sele3").disabled=false; } </script> ■CGI(HTML)側 <form action="xxx"> <table border=0 cellpadding=5 cellspacing=2 width=500> <p>発送先が２箇所以上の場合はこちらから選択ください。 <input type="radio" value="1" onclick="func1('block')" />１箇所</label> <input type="radio" value="2" onclick="func2('none')" />２箇所</label> <input type="radio" value="3" onclick="func3('none')" />５箇所</label> </p> </table> <table id="sele1"> </table> <table id="sele2"> </table> <table id="sele3"> </table> </form> table内容は省略しています。 説明が下手ですがどうかご教授ください。宜しくお願いします。

  • 背景色を変えて未入力チェックをしたいのですが。。。

    アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <html> <head> <title></title> </head> <script language="javascript"> <!-- var saveTr; function setBg(rd) { if(saveTr) saveTr.bgColor="white"; saveTr=rd.parentNode.parentNode; saveTr.bgColor="lavenderblush" } //--> </script> <Body> <form method="post" name="frm"> <p align=center> <table frame=below rules=all width=98% vspace=100> <tr> <td width=7% align=right> <input type="radio" name="count" onClick="setBg(this);"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right> <input type="radio" name="count" onClick="setBg(this);"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right> <input type="radio" name="count" onClick="setBg(this);"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> </table> </form> </body> </html>

  • getElementByIdではまってます・・・

    以下のソースを書いて、Firefoxで実行すると 検索ボタンをクリックするとテーブルが表示されるのですが すぐにもとに戻ってしまいます。 すいません。初心者です。 どなたかご教授ください。 言っている意味が分からなかったらすいません。 補足します。 HTMLです。 <td style="width:60px;" align="center"><input style="width:60px" type="submit" id="id" name="id" onclick="effectDetailWindow('detailWindow');" value="検索"></td> <div id="detailWindow" style="display:none;"> <table border="1" cellpadding="3" cellspacing="1" bordercolor="#000000" style="width:460px;"> <tr> <td style="width:80px;" class="table_head"> TEST1 </td> <td style="width:150px;"> <input type="text" size="25" maxlength="50" name="searchtest1" value="{$form.searchtest1}"> </td> <td style="width:80px;" class="table_head"> TEST2 </td> <td style="width:150px;"> <input type="text" size="25" maxlength="50" name="searchtest2" value="{$form.searchtest2}"> </td> </tr> </table> </div> JavaScriptです。 function effectDetailWindow(id) { var obj = document.getElementById(id); if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; } }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する