ハイパーリンクとonclickとデータベース
- Javascriptのonclickでリンクをクリックするとデータベースから「やさい」を引っ張り出すことは可能でしょうか？
- データベースには果物や肉、魚などのデータが格納されていますが、その中に「やさい」というデータも含まれています。
- リンクをクリックすることでJavascriptの関数が実行され、データベースから「やさい」のデータが取得される仕組みです。
- ベストアンサー
ハイパーリンクとonclickとデータベース
「やさい」という文字にハイパーリンクが張られているとします。 Javascriptのonclickで リンクをクリックするとデータベースから「やさい」を引っ張り出すことは可能でしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> <script language ="javascript"> <!-- //データーベース var datas = new Array(); datas[0] = [ "くだもの" , "A", "りんご"]; datas[1] = [ "くだもの" , "B", "みかん"]; datas[2] = [ "くだもの" , "C", "すいか"]; datas[3] = [ "やさい" , "D", "じゃがいも"]; datas[4] = [ "肉" , "E", "豚"]; datas[5] = [ "魚" , "B", "鮭"]; datas[6] = [ "くだもの" , "C", "オレンジ"]; datas[7] = [ "やさい" , "D", "ピーマン"]; datas[8] = [ "やさい" , "E", "にんじん"]; // --></script> </head> <body> <ul> <li><a class= "a1" href="" onclick="">やさい</a></li> </ul> </body> </html>
- KAIJI-000
- お礼率45% (225/492)
- JavaScript
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
全角空白は半角に置換してください。 Array.filter が使えるブラウザで動かしてみてください。 「<script language ="javascript">」は、もう・・・ 本来のアンカータグの使い方は、・・・ IE10未満は、もう・・・ と、いろいろ。 <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title>kore ga database</title> <style> p.a1 { text-decoration: underline; } p.a1:hover { cursor : pointer; } </style> <body> <ul> <li><p class= "a1">やさい</p> <li><p class= "a1">くだもの</p> <li><p class= "a1">肉</p> </ul> <script> var datas = [ [ "くだもの" , "A", "りんご"], [ "くだもの" , "B", "みかん"], [ "くだもの" , "C", "すいか"], [ "やさい" , "D", "じゃがいも"], [ "肉" , "E", "豚"], [ "魚" , "B", "鮭"], [ "くだもの" , "C", "オレンジ"], [ "やさい" , "D", "ピーマン"], [ "やさい" , "E", "にんじん"] ]; function find (str) { return datas.filter (function (row) { return row[0] == this; }, str); } function disp (key) { var result = find (key) || [ ]; alert (result.join('\n')); } function handler (event) { var e = event.target; if (/(^|\s+)a1(\s+|$)/.test (e.className)) disp (e.textContent); } document.addEventListener ('click', handler, false); </script>
関連するQ&A
- javascriptにてonclickを無効
javascriptにてonclickを無効にしたい 下記のように、onclickイベントキャンセルを書きましたが、 onclickのjavascriptが実行されます。 何かヒントはありませんか？ <html> <head> <script language="JavaScript"> document.onclick = function(e) { event.returnValue = false; } </script> </head> <body> <a href="a.htm" onclick="alert('onclick');">onclick有り</a> <a href="a.htm">onclick無し</a> </body> </html> ※環境 Windows2000(sp4)+ie6(sp1)
- ベストアンサー
- JavaScript
- 連続したonclick
<table> <tr> <td><img src="a001.jpg" onclick="document.body.style.backgroundImage = 'url(a001.jpg)'"></td> <td><img src="a002.jpg" onclick="document.body.style.backgroundImage = 'url(a002.jpg)'"></td> <td><img src="a003.jpg" onclick="document.body.style.backgroundImage = 'url(a003.jpg)'"></td> </tr> </table> ******************************* １ 背景画像の切り替え画像サンプルをつくりました。 これが何十行も連続します。 CSSみたいに同じ内容が重複するときにclassで分類するみたいに、 Javascriptでも簡素化する方法はないでしょうか？ ＜HEAD＞＜/HEAD＞内には <meta http-equiv="Content-Script-Type" content="text/javascript"> しか書いていません。（Javascriptは初心者です） ２ document.body.style.backgroundColor='#ffffff'; backgroundImageとかbackgroundColorの 後方のImageとかColorの頭文字は大文字でも良いのでしょうか？
- ベストアンサー
- JavaScript
- 関数内でonclickをさせたい
以下に示すような動作をさせたいのですが、手段はあるでしょうか？ ご教示の方よろしくお願いいたします。 <html> <head> <script type="text/javascript"> function test1(){ ここでtest2というリンクをクリックしたことにしたい。 document.getElementById("test2").onclickとか勘でやってみたけどダメでした。 } </script> </head> <body> <img src="hoge.jpg" name="test1" onclick="test1();"> <a href="hoge.html" id="test2">test2</a> </body> </html>
- 締切済み
- JavaScript
- jQuery多層式アコーディオンメニューについて。
javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!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> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。
- 締切済み
- JavaScript
- JavaScript onClick
JavaScript初心者です。 クリックしたら音が出るようにしたいのですが音がでません。 どなたかご回答よろしくお願いします。 <html> <head> <script language = "JavaScript"> <!-- function sound(name){ document.all.music.src = name; } --> </script> </head> <body> <bgsound src = # id = music autostart = true loop = true> <a href = # onClick = sound("img/oto.mp3")> <img src="img/picture.jpg"> </a> </body> </html>
- ベストアンサー
- JavaScript
- jQueryでプルダウンメニュー
jQueryでプルダウンメニューを作ろうと思いまして、 とりあえず、リストにカーソルを合わせるとネストしたリストが表示されるようにしてみましたが、 うまく動きません。どうしてでしょうか？ ソースです↓ <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"> </script> <script type="text/javascript"> google.load("jquery", "1"); </script> <script type="text/javascript"> $(function(){ $(ul li).hover( function(){ $(this).children(ul).show();}, function(){ $(this).children(ul).hide();} ); }); </script> </head> <body> <ul> <li>MENU <ul style="display:none;"> <li>sub-MENU1</li> <li>sub-MENU2</li> </ul> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- 文字の大きさを変更するjavascriptについて
文字の大きさを変更するjavascriptについての質問です。 現在以下のようなスクリプトを使用しているのですが、 IE６では動作しますがFirefox2.0では動きません。 原因、アドバイス等あればご指摘お願いします。 *****このスクリプトを外部ファイルとして読み込んでいます***** function larger(){ content_area.style.fontSize="14pt"; } function standard(){ content_area.style.fontSize="12pt"; } function smaller(){ content_area.style.fontSize="9pt"; } *********************************************************** *****head内の外部js読み込み部分***** <script type="text/JavaScript" src="common/js/fontsize.js"></script> ************************************ *****body内のjavascript呼び出し部分***** <ul> <li class="text_large"><a href="javascript:larger()">文字サイズ大</a></li> <li class="text_mid"><a href="javascript:standard()">文字サイズ中</a></li> <li class="text_small"><a href="javascript:smaller()">文字サイズ小</a></li> </ul> **************************************** よろしくお願いします。
- ベストアンサー
- JavaScript
- <ul>から</ul>の間をjavascriptで
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="images"> <ul> <li style="width: 354px"><a href="javascript:;">ああ</a></li> <li style="width: 354px"><a href="javascript:;">いい</a></li> <li style="width: 354px"><a href="javascript:;">うう</a></li> <li style="width: 354px"><a href="javascript:;">ええ</a></li> </ul> </div> </body> </html> の<ul>から</ul>の間の<li></li>を1個にしたり5個にしたり、<ul>から</ul>を無くしたり javascriptで動的に変更するスプリクトが知りたいです。
- ベストアンサー
- JavaScript
- 秀丸の正規表現(HTMLの修正)について
こんばんは。htmlのタグの修正をしている最中なのですが、ページ数が多く秀丸のgrep置換で正規表現を用いて一気に修正したいと思っています。 内容としては、特定のタグ以外を削除するというものです。 例として2つのhtmlの置換前と後を挙げると 1.html(置換前) <html> <head> <title>物理講座1</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="Keywords" content="物理講座"> </head> <body> <h1>物理について1</h1> <p>あああいいいうううえええおおお</p> <h2>相対性理論</h2> <ul> <li>相対性理論とは</li> <li>相対性理論とアインシュタイン</li> <li>まとめ</li> </ul> <p>(c) butsuringo</p> </body> </html> 2.html(置換前) <html> <head> <title>物理講座2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="Keywords" content="物理講座"> </head> <body> <h1>物理について2</h1> <p>かかかきききくくくけけけこここ</p> <h2>運動量保存の法則</h2> <ul> <li>内力と外力</li> <li>合体分裂</li> <li>まとめ</li> </ul> <p>(c) butsuringo</p> </body> </html> を 1.html(置換後) <html> <head> <title>物理講座1</title> </head> <body> <h1>物理について1</h1> <ul> <li>相対性理論とは</li> <li>相対性理論とアインシュタイン</li> <li>まとめ</li> </ul> </body> </html> 2.html(置換後) <html> <head> <title>物理講座2</title> </head> <body> <h1>物理について2</h1> <ul> <li>内力と外力</li> <li>合体分裂</li> <li>まとめ</li> </ul> </body> </html> といった具合に、残したいタグ(html,head,bodyは除く)は ・title ・h1 ・ul、li です。実際のページでは他にも説明文やタグなどが多くあるのですが、特定のタグだけ残して他はすべて消したいのです。ページの作りは全ページ一緒です。 この場合正規表現ではどう表わしたらよいのでしょうか? お知恵を授けて頂けたら助かります。
- ベストアンサー
- HTML
- iPhone向けサイトの開発－iui
現在、iuiを使用して、iPhone＆iPod Touch向けのサイトを勉強がてら作成しておりますが、<li>タグ内に書いている<a>タグ要素内のonclickイベントが発生しなくて困っております。。。 見にくいと思いますが、以下がソースです。(２ファイル) ●page1.html <!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> <title>iUI Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <link rel="apple-touch-icon" href="../iui/iui-logo-touch-icon.png" /> <meta name="apple-touch-fullscreen" content="YES" /> <style type="text/css" media="screen">@import "iui/iui.css";</style> <script type="application/x-javascript" src="iui/iui.js"></script> <script type="text/javascript"> function select_kokyaku(code) { alert(code); } function select_busho(code) { alert(code); } </script> </head> <body onclick="console.log('Hello', event.target);"> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> </div> <ul id="selectkokyaku" title="顧客選択" selected="true"> <li><a href="#kokyaku1" onclick="select_kokyaku('kokyaku1');">顧客１</a></li> <li><a href="#kokyaku2" onclick="select_kokyaku('kokyaku2');">顧客２</a></li> </ul> <ul id="kokyaku1" title="顧客１"> <li><a href="page2.html" onclick="select_busho('busho11');">顧客１－部署１</a></li> <li><a href="page2.html" onclick="select_busho('busho12');">顧客１－部署２</a></li> </ul> <ul id="kokyaku2" title="顧客２"> <li><a href="page2.html" onclick="select_busho('busho21');">顧客２－部署１</a></li> <li><a href="page2.html" onclick="select_busho('busho22');">顧客２－部署２</a></li> </ul> </body> </html> ●page2.html <!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> <title>iUI Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <link rel="apple-touch-icon" href="../iui/iui-logo-touch-icon.png" /> <meta name="apple-touch-fullscreen" content="YES" /> <style type="text/css" media="screen">@import "iui/iui.css";</style> <script type="application/x-javascript" src="iui/iui.js"></script> <script type="text/javascript"> function select_bunrui(code) { alert(code); window.close(); } function select_shouhin(code) { alert(code); window.close(); } </script> </head> <body> <ul id="bunruiselect" title="分類選択" selected="true"> <li><a href="#bunrui1" onclick="select_bunrui('bunrui1');">分類１</a></li> <li><a href="#bunrui2" onclick="select_bunrui('bunrui2');">分類２</a></li> </ul> <ul id="bunrui1" title="分類１"> <li><a href="" onclick="select_shouhin('shouhin11');">分類１－商品１</a></li> <li><a href="" onclick="select_shouhin('shouhin12');">分類１－商品２</a></li> </ul> <ul id="bunrui2" title="分類２"> <li><a href="" onclick="select_shouhin('shouhin21');">分類２－商品１</a></li> <li><a href="" onclick="select_shouhin('shouhin22');">分類２－商品２</a></li> </ul> </body> </html> ※page1.htmlからpage2.htmlに画面遷移後、page2.html側で<a>タグ要素内のonclickイベントが発生しません。。。 サファリで実行して確認しております。 どなたか原因がわかる方はいらっしゃいますでしょうか。 ご教授お願い致します。
- 締切済み
- HTML
お礼
丁寧に解説有難うございます。 babu_baboo さんの回答は大変参考になっています。 少し試してみます。
補足
うまくいきませんでした。 画面にはただ単に羅列で •やさい •くだもの •肉 としか表示されていません