- ベストアンサー
ハイパーリンクとonclickとデータベース
- Javascriptのonclickでリンクをクリックするとデータベースから「やさい」を引っ張り出すことは可能でしょうか?
- データベースには果物や肉、魚などのデータが格納されていますが、その中に「やさい」というデータも含まれています。
- リンクをクリックすることでJavascriptの関数が実行され、データベースから「やさい」のデータが取得される仕組みです。
- みんなの回答 (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>
お礼
丁寧に解説有難うございます。 babu_baboo さんの回答は大変参考になっています。 少し試してみます。
補足
うまくいきませんでした。 画面にはただ単に羅列で •やさい •くだもの •肉 としか表示されていません