ファイル名を取得して表示させる

前へ 次へ
このQ&Aのポイント
  • ファイル名を取得して表示する方法について教えてください。
  • index.htmlとa.jsとdata.jsがあり、a.jsはdata.jsと連動しています。index.htmlに自動的に表になるよう設定されています。個別ページを作成し、ファイル名を001.html、002.htmlのように設定し、それぞれのページでdata.jsに連動させた表を表示したいです。
  • data.jsの中には個別のデータが配列として格納されています。JavaScriptを使用して各ページで対象のデータを抽出し、表示する方法を教えてください。
回答を見る
  • ベストアンサー

ファイル名を取得して表示させる

ちょっと長くなりますが、次のようにしたいと考えています。 index.html と a.jsとdata.jsがあるとし、a.jsはdata.jsの中と連動し、 index.htmlに自動的に表になるよう設定。正常に動いています。 その表の個別ページを作成しようと考えています。 ファイル名は、001.html、002.html・・・というふうにします。 そこで、001.htmlでは「data.js」と連動し、個別対象のものを 抽出し、表示するというふうにしたいのですが、どのようなやり方が 考えられるのでしょうか？ 具体に言うとこうなります。「data.js」の中身はこんな感じに なっています。 var data = new Array() data[21] = "○" data[20] = "" data[19] = "■" data[18] = "□" data[17] = "×" 　　　　・ 　　　　・ data[1] = "" data[0] = "○" それをジャバスクリプトで、021.htmlには「○」を 001.htmlには空欄を…表示させたいのです。 困ってしまっています。ぜひご教授ください。 よろしくお願いします。

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

location.href または、 location.pathname で 現在開いているファイル名が取得できますから それで、配列から取得する値を変えればいいでしょう

nsi2xpz
質問者

お礼

ありがとうございます。 無事できました♪ location.hrefってそういう意味だったんですね

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • データのidの多い順に書き出す

    ぜひご教授ください。 データをhtmlに、ジャバスクリプトで表にしようとしています。 その際、ジャバスクリプトファイルとデータは別ファイル化することを前提にしています。 具体には、a.jsは、テーブルの書き出しを想定し、次のように書き込んでいます。 //テーブル書き出し html = '<table width="195px">' for (i=0;i<data.length-1;i++) { html += ' <tr>' html += ' <td> ' +data[i]+ ' </td>' html += ' </tr>' } html += '</table>' //書き出し document.write( html ) //--> そして、b.jsはデータファイルとし、次のように書き込んでいます。 var data = new Array() data[0] = "aaaaa" data[1] = "bbbbb" で、これをhtmlに表示させると、aaaaaの下にbbbbbが来るわけですが、考えているのは、データを足していき、htmlの表示は、新しい順にならべたいと考えているため、これでは不服なのです。 いちいち、データファイルに足す際、data[*]を全部書き換えるのも嫌なので、そのまま、*は大きいものを足すだけで、それでいてhtmlの方は*の大きい方から表示する…。 そうするには、どこをどういじればよいのでしょうか。 本気で困っています。 よろしくお願いいたします。

  • jsファイルで配列を定義し、ｊｓファイルを切りかえて使う

    お世話になります。 jsファイルで配列を定義し、その配列の内容を表示しています。 いくつかのjsファイルで配列を定義し、そのjsファイを切りかえることにより、表示する配列の内容を切りかえることはできないでしょうか。 例えば data_a.js DataAry = new Array( new WNData('2006/11/10','ああ','・・.html'), new WNData('2006/11/10','いい','・・.html'), ・・・・・ ); data_b.js DataAry = new Array( new WNData('2006/11/10','aa','・・.html'), new WNData('2006/11/10','bb','・・.html'), ・・・・・ ); dspDataAry.jsで function WNData(Date,Cmnt,Href,Target){ this.Date=Date; this.Cmnt=Cmnt; this.Href=Href; } function DspData(){ strhtml="・・・・ （DataAryを表示するhtmlを作成） return strhtml; } dspDataAry.htmlで <script type='text/javascript' src='dspDataAry.js'></script> <script type='text/javascript' src='data_a.js'></script> <body> <script type='text/javascript'><!-- document.write DspData(); //--> </script> <input id="btn_b" type="button" value="bを表示" onClick="ｂを表示する関数"<br> </body> とすれば、data_a.jsの配列の内容が表示されます。 ボタン「ｂを表示」を押すことにより、 data_b.jsを読み込んで、その内容を表示するようにできないものでしょうか。 onClick="ｂを表示する関数"この「ｂを表示する関数」をいう関数をどのように書いたらよいのかわかりません。 data_a.js、data_b.jsで定義する配列名は同じとします。 data_c.js、data_d.js・・・といくつかに分けたく思っています。 前もってdata_b.jsを読み込むのでなく、必要に応じて読み込んで表示するようにしたいのですが。 よろしくお願いいたします。

  • 自動で表作成

    ぜひご教授ください。 以前、問合せていただいたものの延長です http://oshiete1.goo.ne.jp/kotaeru.php3?q=2261428 データをhtmlに、ジャバスクリプトで表にしようとしていて、ジャバスクリプトファイル(a.js)とデータは別ファイル化(b.jsとc.js)することを前提にしています。 いざ作りはじめたところ、データが多いことがわかったので、表を２列にしたものにできないか、と考えたのですが、その場合、a.jsはどのように書き込めばよいのか、皆目検討がつきません。 よろしくお願いします。 ちなみに、今現在の状況はこうなっています。 a.js↓ html = '<TABLE cellpadding="3" cellspacing="2" width="100%">' 　　for (i=data.length-1;i>=0;i--) //昇順：　 for (i=0;i<data.length;i++) //降順： for (i=data.length-1;i>=0;i--) { html += ' <TBODY><TR>' html += ' <TD bgcolor="#ffffff" onmouseover="this.style.backgroundColor='#8b0000'" onmouseout="this.style.backgroundColor=''"> ' html += ' <TABLE width="100%" cellpadding="1" cellspacing="0" bgcolor="#ffffff"> ' html += ' <TBODY><TR> ' html += ' <td><a href= ' +link[i]+' >' html += ' '+data[i]+ ' </td>' html += ' </tr></tbody></table>' html += ' </td></tr></tbody>' } html += '</table>' //書き出し document.write( html ) b.js↓ var data = new Array() data[50] = "aaaaa" data[49] = "bbbbb" 　↓ data[0] = "xxxxx" c.js↓ var link = new Array() link[50] = "049.html" link[49] = "048.html" 　↓ link[0] = "001.html"

  • スクレイピングで取得した文字を変数表示

    javascriptでiphoneアプリを作成中です。 ゲームにあたり、自社サーバーのhoge.ne.jp/read1000.php上のデータベース 情報をスクレイピンクしてiphone上で表示させます。 下記により、「hoge.ne.jp/read1000.php」にあるソースの中から 「吉本」の文字をスクレイピング表示することが可能です。 ****【hoge.ne.jp/read1000.php】(DBサーバー)******************** 　　　 　　　<td class="class3_sql_name">吉本</td> ****【hogehoge.com/index.html】(iphone仮想サーバー)************** 　 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); $("#text3_sql_name").text(content3_sql_name); }); </script> <div id="text3_sql_name"></div>　 //←この部分にhoge.ne.jpからスクレイピング 　　　　　　　　　　　　　　　　　　　　　　した吉本の文字が表示される ************************************************************ やりたいこと ここで取得できた「吉本」の文字を変数としてjavascript上で表示させたいと考えています。 下記のようにしたのですがグローバル変数、ローカル変数とも表示出来ません。 どうすれば表示できるでしょうか? ****【hogehoge.com/index.html】(iphone仮想サーバー)************* <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); $("#text3_sql_name").text(content3_sql_name); //テスト用としてグローバル変数追加 content3=$("#text3_sql_name").text(content3_sql_name); }); </script> <script> document.write(""+content3_sql_name+""); </script> <script> document.write(""+content3+""); </script> 　↑上記のふたつとも表示出来ない 宜しくお願い致します。

  • 外部ファイル名を変数で指定できるか？

    JavaScriptで参照する外部ファイルを、ヘッダー部で以下のように記述しています。 <script language="JavaScript" src="Data.js"></script> このsrc=で、指定するファイルを、変数で指定することは可能でしょうか？ 試しに <script language="JavaScript"> <!-- var Src_File = "Data.js"; 　src=Src_File； //--> </script> と記述しても、エラーとなってしまいました。 変数を使いたい理由は、ラジオボタン等を使って、参照する外部ファイルを動的に切り替えたいのです。 よろしくお願いします。

  • 条件をつけて表として書き出すには

    何度もすみません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2331409 の延長です。 データやリンク先を書き込んでいるb.js、c.jsは下記のようにして、表として書き出すものの条件を、例えば、データの15～25の間だけ表に書き出す…というようにさせたいと考えています。 例） b.js↓ var data = new Array() data[50] = "aaaaa" data[49] = "bbbbb" 　↓ data[0] = "xxxxx" c.js↓ var link = new Array() link[50] = "049.html" link[49] = "048.html" 　↓ link[0] = "001.html" 表を書き出すa.jsは教わったとおり、↓のように書き込んでいます。 for(i=data.length-1;i>=0;i--){ str_html = str_html + '<tr><td><a href=' + link[i] + '>' + data[i] + '</td>'; --i; if(i==-1){ str_html = str_html + '<td></td></tr>'; }else{ str_html = str_html + '<td><a href=' + link[i] + '>' + data[i] + '</td></tr>'; } } 最小限の改造でできる方法はないでしょうか。 よろしくお願いします。

  • スクレイピングした内容をvalue値に入れたい

    下記のようなページがあります。 ++++++++++++++++++++++++++++++++++++++++++ 【http://hoge.ne.jp/index.html】 <html> <table border="1"> <tbody> <tr> <td class="class3">東京</td> </tr> </tbody> </table> </html> ++++++++++++++++++++++++++++++++++++++++++ 【出来たこと】 上記の東京という文字を抜き出すスクレイピングページを作りました。 ****************************************** 【http://hogehoge.com/index.html】 <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <div id="text4"></div> </html> 結果　→　東京 ************************************** 【出来なかったこと】 これを、<input type="text" name="tx" value="東京">　のような形でフォーム内に取り入れることを考えています。 しかしながら、下記のようにうまくいきません。 ●●だめ　その1●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <input type="text" name="tx" value="<div id='text4'></div>"> </html> 結果　→　表示されず ●●だめ　その2●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); var tx4 = content4; document.write("<input type='text' name='tx' value='" + tx4 + "' />"); </script> </html> 結果　→　表示されず 【お願いしたいこと】 <input type="text" name="tx" value="東京">の形で表示させる方法についてアドバイスいただきたくお願いいたします。

  • ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのです

    ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのですが 表示できなくて困っています。 以下のサイトを参考に、それぞれ1つのファイルに1つのグラフを表示はできました。 http://www.html5.jp/library/index.html また、グラフを上下入れ替えると後に書いたほうが有効になるようです。 どうしたら表示できるようになるか、わかる方アドバイスをお願いします。 以下headタグ以降をそのまま引用です。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>グラフ</title> <link href="sample_graph.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="rendering-mode.js"></script> <!--[if IE]><script type="text/javascript" src="./html5jp/excanvas/excanvas.js"></script><![endif]--> <script type="text/javascript" src="./html5jp/graph/circle.js"></script> <script type="text/javascript" src="./html5jp/graph/radar.js"></script> <script type="text/javascript"> window.onload = function() { var rc = new html5jp.graph.radar("sample_radar"); if( ! rc ) { return; } var items_radar = [ ["商品A", 3, 3, 2, 3, 1] ]; var params_radar = { aCap: ["A", "B","C", "D", "E"], aMax: 3, aMin: 0, legend: false } ; rc.draw(items_radar, params_radar); }; </script> <script type="text/javascript"> window.onload = function(){ var cg = new html5jp.graph.circle("sample_circle"); if( ! cg ) { return; } var items1 = [ ["A", 9, ], ["B", 3, ], ["C", 0,] ]; cg.draw(items1); }; </script> </head> <body> <div><canvas width="300" height="200" id="sample_radar"></canvas></div> <div><canvas width="300" height="200" id="sample_circle"></canvas></div> </body> </html>

  • java scriptで読み込むtxtでリンクする

    java scriptを使って外部テキストデータをhtml内に表示させることはできたのですが、そのテキストからさらに別ページへのリンクを貼る方法はあるでしょうか？ ■java script内 var data = [ [2010.12.12,ここにコメント], [2010.11.11,'ここにコメント'], [2010.10.10,'ここにコメント'] ]; ※ここにコメントの全文または一部分をリンクさせたいです。 ■html内 <script type="text/javascript" src="data.js"></script> <script type="text/javascript"> for(var i=0;i<data.length;i++) document.write(data[i][0]+'&nbsp; &nbsp;'+data[i][1]+'<br>'); </script> よろしくお願いします。

  • 外部ファイルの記述の問題なのかエラーが出ます

    IE6を使っています。 次のように[a.js]を呼び出したのですが、 オブジェクトがありませんとエラーが出ます。 そのエラーの次に[test.html]にあるalertの内容は表示されます。 どこが間違っているのでしょうか？ [a.js] var a = document.body.clientWidth; [test.html] <html> <head> <title>test</title> <script type="text/javascript" src="a.js"></script> </head> <body> <script type="text/javascript"><!-- alert(document.body.clientWidth); --></script> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する