同ディレクトリのhtmlリンク 表示方法
- 同ディレクトリのhtmlのリンクを表示する方法についてご教示ください
- javascriptを使用して本日の日付から3日間のリンク情報をピックアップし、表示させたいです
- VBの経験はありますが、javascriptは初心者で困っています。お願い致します
- ベストアンサー
同ディレクトリのhtmlのリンクを表示させるには
本日の日付から3日間のリンク情報をピックアップさせたくて作成してみました。 リンク情報部分を同ディレクトリの他のhtmlファイルにして、読み込ませて処理 させたいのですがどうしたものか分からず困っております。 VBは多少経験があるもののjavascriptは初心者でして、いろいろ至りませんが、 どうぞよろしくお願い致します。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>サンプルページ</title> </head> <body> <h1>サンプル</h1> <!-- ここから --> <table border="0" width="560" cellpadding="2" cellspacing="0"> <tr> <td class="border" id="201307220"><a href="d.html" target="_blank">7/22 セミナー</a></td> </tr> <tr> <td class="border" id="201307200"><a href="d.html" target="_blank">7/20 会議</a></td> </tr> <tr> <td class="border" id="201307191"><a href="e.html" target="_blank">7/19 機器入れ替え</a></td> </tr> <tr> <td class="border" id="201307190"><a href="f.html" target="_blank">7/19 会議</a></td> </tr> <tr> <td class="border" id="201307180"><a href="g.html" target="_blank">7/18 セミナー</a></td> </tr> </table> <!-- ここまでのデータは同一ディレクトリ内の他のページからデータを参照させてピックアップさせたい --> <script type="text/javascript"> //現在日時取得 var TODAY = new Date(); var strDate = new Array(3); var afterDays; var year; var month; var day; //現在日から3日間の日付を取得しidと比較可能な形式にする for (i = 0; i < 3; i++){ afterDays = new Date(TODAY.getTime() + i *24*60*60*1000); year = afterDays.getFullYear(); month = afterDays.getMonth() + 1; day = afterDays.getDate(); if (month < 10) { month = String("0" + month); } if (day < 10) { day = String("0" + day); } strDate[i] = String(year + month + day); } //リンク抽出表示 for (y = 0; y < 3; y++){ for (z =0; z < 2; z++){ if (document.getElementById(strDate[y] + z) == null) { ; } else { document.write(document.getElementById(strDate[y] + z).innerHTML + "<br>"); } } } </script> </body> </html>
- sad83
- お礼率100% (2/2)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 イメージはこんな感じでしょうか。 (JavaScriptが動かない、または動かない設定にしている場合は動作しませんので本来ならサーバ上で処理するのが望ましいです) また、細かいことですが先頭が数字のIDは使えません。 <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style> div#news { display: none; } </style> <script> $().ready ( function() { // id="news"にdata.htmlを読み込む $('#news').load ( 'data.html', null, function() { // 表示する最大日数 var maxDate = new Date(new Date().getTime()+60*60*24*2*1000); // 取得したtdの分ループ処理 $(this).find('td').each ( function() { // idを取得する var id = $(this).attr('id'); // 取得したIDから日付文字列を取得 var date = id.split('-')[1]; // 日付文字列からミリ秒を生成 var targetDate = Date.parse(date.substring(0,4)+'/'+date.substring(4,6) + '/' + date.substring(6,8)); // 表示対象の日付であるかチェックし、対象外の場合は非表示とする if ( targetDate > maxDate.getTime() || targetDate < new Date().getTime()-60*60*1000*24 ) { $(this).css ( 'display', 'none' ); } }); // 表示する $('#news').show(); } ); }); </script> </head> <body> <h1>NEWS</h1> <div id="news"></div> </body> </html> ==== data.html <table border="0" width="560" cellpadding="2" cellspacing="0"> <tr> <td class="border" id="date-20130722-0"><a href="d.html" target="_blank">7/22 セミナー</a></td> </tr> <tr> <td class="border" id="date-20130721-0"><a href="d.html" target="_blank">7/21 セミナー</a></td> </tr> <tr> <td class="border" id="date-20130720-0"><a href="d.html" target="_blank">7/20 会議</a></td> </tr> <tr> <td class="border" id="date-20130719-1"><a href="e.html" target="_blank">7/19 機器入れ替え</a></td> </tr> <tr> <td class="border" id="date-20130719-0"><a href="f.html" target="_blank">7/19 会議</a></td> </tr> <tr> <td class="border" id="date-20130718-0"><a href="g.html" target="_blank">7/18 セミナー</a></td> </tr> <tr> <td class="border" id="date-20130717-0"><a href="g.html" target="_blank">7/17 セミナー</a></td> </tr> </table>
その他の回答 (1)
- duke_kimura
- ベストアンサー率39% (53/134)
DTDが曖昧なんですがこれはHTMLの話でしょうか？XHTMLの話でしょうか？ HTMLの話であれば基本的にはできませんが、framesetで似たようなことは出来ます。 http://www.tohoho-web.com/html/frameset.htm PC以外からはうまく表示できないケースが多いという弊害もあります。
お礼
ご回答頂きましてありがとうございます。 アドバイスありがとうございました。 勉強になりました。
関連するQ&A
- エクセルファイルを、HTMLに出力
エクセルファイルを各項目ごとにHTMLに出力したいのですが、 何かよいソフトや方法はないでしょうか？ <tr><td class="x_01"><a href="【A1】" target="_blank">【B1】</a></td><td class="y_02">【C1】</td><td class="z_03">【D1】</td></tr> <tr><td class="x_01"><a href="【A2】" target="_blank">【B2】</a></td><td class="y_02">【C2】</td><td class="z_03">【D2】</td></tr> .... このような形式で、出力していきたいです。 とりあえず、このように自動で出力できる方法ならばどのような方法でも構いません。 どうぞよろしくおねがいします。
- 締切済み
- オフィス系ソフト
- ブラウザによってリンク集のバナー画像が表示されません。
↓ こちらの質問とほぼ同じです。 http://oshiete1.goo.ne.jp/qa3085778.html そして、こちらで紹介されているサイトhttp://www.aland.to/~lintrank/trylint/htmllint.htmlでチェックしても解決できなかったので、質問させていただきたいと思います。 私は、Win(IE7)、ビルダー11、フォトショ・イラレ等を使ってHPを作成しました。 既に転送済みのファイルのうち リンク集の表に貼ったバナー画像がIE6だと表示されません(直リンはしてません)。×がつくのではなく、何も表示されていません。 IE7だと全く問題ないです。他のファイルには上記の様な異常は一切ありません。 リンク集一覧は、2×2の表を作り、左にバナー画像、右に ちょっとした説明を載せています。 ブラウザによって表示が異なるのはタグが正確ではないからでしょうか。HTMLというものは、つい最近知った初心者なのでよく分かりません。 よろしくお願いします。 おそらく↓この部分が表のタグだと思います。 <TABLE border="0" width="731" height="85" summary="イラスト関連サイト様一覧"> <TBODY> <TR> <TD align="center" valign="middle" width="258"><A href="http://***.***.jp/" target="_blank"><IMG src="banner1.gif" width="200" height="40" border="0" alt="*** "></A><BR> <FONT size="-1">サイト名：<A href="http://***.***.jp/" target="_blank"> ***</A></FONT></TD> <TD valign="middle" width="463"><FONT size="-1">管理人：***様</FONT><BR> <FONT size="-1">***さんが描かれるイラストは、～。</FONT></TD> </TR> <TR> <TD align="center" width="258" height="23"><A href="http://***.***.jp/" target="_blank"><IMG src="banner2.GIF" width="200" height="40" border="0" alt="***"></A><BR> <FONT size="-1">サイト名： <A href="http://***.***.jp/" target="_blank">***</A></FONT></TD> <TD valign="middle" width="463" height="23"><FONT size="-1">管理人：***様<BR> ***さんが描かれるイラストは、～。</FONT></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- HTML
- 同ページ内リンクでの画像表示について
同じページ内にテーブルを一個ずつ作ります。 １つはメニュー欄、もう１つは表示欄。 メニュー欄のテーブルからクリックして 表示欄のテーブルに画像を表示したいのですがうまくいきません。 <TABLE border="1"> <TR><TD> <A href="http://www.geocities.jp/deepv8/gazou/G_AW.gif#hyoji2">表示</A> </TD></TR> </TABLE> <br> <TABLE border="1" width="300" height="300"> <TR><TD> <A name="hyoji2" href=""></A> </TD></TR> </TABLE> どこが間違っているのでしょうか？ ご教示の程宜しくお願いします・・・m(_ _)m
- ベストアンサー
- ホームページ作成ソフト
- 携帯サイトにてsoftbankだけカーソルの動きがおかしい
携帯サイトを作成しているのですが、 docomo,auだとカーソルは画像→あ→い→う→えの順なんですが softbankだけは画像→い→あ→う→えの順になってしまいます。 そのため、tabindexタグを付けましたが効果はありません。 テーブルが駄目なのでしょうか。 それともsoftbankの仕様でしょうか。 <p> <a href="o.jpg" target="_blank"> <IMG src="y.jpg" align="center" tabindex="1" border="0" copyright="yes" alt="お"></a> </p> <hr> <table border="0"> <tr> <td>1<a href="m.html"accesskey="1" tabindex="2">あ</a></td> <td>2<a href="y.html"accesskey="2" tabindex="3">い</a></td> </tr> <tr> <td>3<a href="n.html"accesskey="3" tabindex="4">う</a></td> <td>4<a href="e.html"accesskey="4" tabindex="5">え</a></td> </tr> </table>
- 締切済み
- HTML
- リンク先から戻ったら、表示がおかしい。
未完成品です。 サイトの各ページからメインページに戻ると、文字の色が変わったり、 大きさが変わります。 どこに不具合があるか、初心者なのでよくわかりません。 いじりすぎて、構成もめちゃくちゃだと思いますが、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ゲームのすべて</title> </head> <!--全体の背景--> <body bgcolor="#696969" text="#FFFFFF" link="#0000FF" alink="#DC143C" vlink="#8B008B"> <title>デザイン</title> <style type="text/css"> <!-- body { line-height:150%; font-size: 12px; color: #222222; margin:10px 0px; } .menu_c { font-size:12px; color:#cccccc; } .menu_c a { color:#ffffff; text-decoration: none; } .menu td { padding:2px 8px; } .side { background:#D3D3D3; margin:0px 0px 10px 0px; padding:5px 8px; border-left: #80838F 1px solid; border-right: #80838F 1px solid; border-bottom: #80838F 1px solid; } h3 { color:#ffffff; font-size:12px; margin:0px; padding:2px 12px; background:#808080; } h4 { color:#ffffff; font-size:12px; margin:0px 0px 0px 8px; padding:2px 12px; background:#808080; } .comb { margin:0px 1px 10px 8px; padding:5px 10px 5px 4px; background:#D3D3D3; } --> </style> </head> <!-- ページの全体幅テーブルタグ --> <table width="780" align="center"> <tr><td> <!--一番上のところ--> <table width="100%" > <tr> <td width="18%"><img src="logo.gif" width="132" height="40"></td> <td width="82%" align="right"><a href="index">ホーム</a> <hr noshade size=1></td></tr> </table> <br> <table width="100%" border="0" cellspacing="0" bgcolor="#DCDCDC" class="menu"> <tr><td width="72%">ああああああああああああああ</td> <td width="28%" align="right">デザイン</td></tr> </table> <table width="100%" border="0" cellspacing="0" class="menu"> <tr><td bgcolor="#808080" class="menu_c"><a href="#">ホーム</a> | <a href="#">おもなゲーム</a> | <a href="#">ソフト</a> | <a href="#">作られる過程</a> </td></tr> <tr><td><a href="#">ホーム</a> > ページナビ</td></tr></table> <!--左サイドメニュー--> <table width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-bottom: #B6B6B6 1px solid;"> <tr><td width="25%" height="70" valign="top" bgcolor="#696969"> <h3>おもなゲーム</h3> <div class="side"> ・<a href="page1.html#1">PS3</a><br> ・<a href="page1.html#2">PSP</a><br> ・<a href="page1.html#3">PSP go</a><br> ・<a href="page1.html#4">Xbox360</a><br> ・<a href="page1.html#5">Wii</a><br> </div> <h3>ソフト</h3> <div class="side"> <br> </div> <h3>おもなゲーム</h3> <div class="side"> ・<br> ・<br> ・<br> ・<br> </div> <h3>プログラマー</h3> <div class="side"> </div> <!--左サイドメニュー 終--> <!--右サイドメニュー 始--> <br></td> <td width="75%" valign="top"> <h4>自己紹介</h4> <div class=comb>ああああああああああああああああああああああああああああああああ<br> aaaaaaaa<br> aaaa </div> </td></tr></table> </td></tr></table> <table width="100%" > <tr><td align="center"><a href="index.html">ホーム</a> | <a href="page1.html">おもなゲーム</a> | <a href="page2.html">ソフト</a> | <a href="page3.html">作られる過程</a> | <a href="page4.html">プログラマー</a></td></tr> <tr><td align="center">Copyright © Your site. All Rights Reserved. </td></tr> </table> </html>
- 締切済み
- HTML
- テーブル幅を完全に指定したい
テーブル幅の指定方法を教えてください。 以下のような記述のテーブルを何列も羅列して 表を作ろうと思っています。 alt="小A"～alt="小D" のところは 項目ごとのアイコン画像が入り、その項目に該当するものが無い場合は空白となるような表です。 実際にブラウザで表示してみると、widthの設定はしているのに、空白をつくると 若干ですが横幅が変わってしまい、表として並べたときにそのズレが目立ちます。 何がいけないのか、お知恵を拝借できませんでしょうか。 宜しくお願い致します。 以下、その表の一部である テーブルになります。 <table bordercolor="#ffffff" width="520" height="80" align="center" cellspacing="3"> <tr><td bgcolor="#ffcccc"> <table> <tr> <td width="100" bgcolor="#ffcccc" align="center" valign="middle"> <a href="★" target="_blank"><img src="■.gif" width="80" height="60" border="0" class="pict"/></a> </td> <td width="260" align="left" valign="center"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよ </td> <td valign="center"> <img alt="中" src="■.gif" width="80" height="60" class="pict" /> </td> <td width="25"><a href="★" target="_blank"><img alt="小A" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小B" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小C" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小D" src="■.gif" width="25" height="60" class="pict" /></a></a></td> </tr> </table></td></tr></table>
- ベストアンサー
- HTML
- JavaScriptの記述を教えて下さい。
はじめまして、charliehamaといいます。 素人なもので、JavaScriptに詳しい方、教えて下さい。 次のコード（全体の中の一部）があります。 <!-- // ------------------------------------------------- // HTML生成関数 // ------------------------------------------------- function disp(){ //各要素を変数に格納 var $day = $(this).find('day').text(); var $label = $(this).find('label').text(); var $category = $(this).find('category').text(); var $content = $(this).find('content').text(); var $url = $(this).find('url').text(); var $target = $(this).find('target').text(); //HTMLを生成 $('<tr>'+ '<th>'+$day+'</th>'+ '<td class="label"><span class="'+$label+'">'+$category+'</span></td>'+ '<td><a href="'+$url+'" target="'+$target+'">'+$content+'</a></td>'+ '</tr>').appendTo('table.tbl tbody'); } --> 変数$urlについて、if構文で分岐させるにはどのように記述すればよいですか？ (1) $urlがxxxの時、<td><span class="abc">'+$content+'</span></td> とする。 (2) $urlがそれ以外の時、<td><a href="'+$url+'" target="'+$target+'">'+$content+'</a></td>とする。 (3) (1)と(2)以外の処理は変更しない。 質問の仕方が悪ければご指摘下さい。 困っています。 どうかよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- ブログのHTMLからトラックバックをしたブログのURLの抽出(URLの重複抽出を避けたい)
いつもお世話になっています。 先日、「ブログのHTMLからトラックバックをしたブログのURLの抽出」 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1725502 の質問にてのご回答を参考にプログラムを作成しました。 ところで、ブログによってはトラックバック先のURLを紹介するときに、 トラックバック先のブログの記事のタイトル・そのブログタイトル名やmoreなどの表示によって、 トラックバックの先のURLのリンクがHTML中に二つ以上出てくるものもあります。 例えば、楽天では、以下のHTMLのように同じURLが重複しています。 <html> <head> … <a name="trackback"></a> <H4 class="h4"> <TABLE border="0" cellpadding="0" cellspacing="0" width="100%"><TR><TD> <a href="http://plaza.rakuten.co.jp/example/20051020/" target="_blank"></a> </TD><TD align="right"> <a href="http://plaza.rakuten.co.jp/example/20051020" target="_blank </a> </TD></TR></TABLE> /div> <br /> <H4 class="h4"> <TABLE border="0" cellpadding="0" cellspacing="0" width="100%"><TR><TD> <a href="http://blogs.dion.ne.jp/example/archives/2121894.html" target="_blank"> </a> </TD><TD align="right"> <a href="http://blogs.dion.ne.jp/example/archives/2121894.html" target="_blank">TORACCHO'S ROOM E-Package2</a> </TD></TR></TABLE> </H4> … </body> </html> そこで、同じURLを重複して抽出しないようにするには、 どのようにプログラムを改正すればよいのでしょうか？ よろしくお願いします。
- ベストアンサー
- Java
- マウスが重なったら画像の上に文字を表示する
今までに、画像を背景としてHTMLでその上に文字を表示することは出来たのですがそれだと文字が表示しっぱなしで、JavaScriptを使って画像にマウスが乗ると文字を表示するタイプにすると文字が画像の下に表示されてしまい上手くいきません。 画像にマウスが乗ると文字を画像の上に表示するようにするにはどのようにしたら良いでしょうか？ ちなみに HTMLで考えたもの -------------------------------------------------------- <table width="90" border="0" cellspacing="5" cellpadding="5"> <tr> <td><TABLE border="0" width="90" height="90" background="aikon/M1-アイコン2.gif"><TBODY><TR><TD> <CENTER><A href="Ｍ１/00.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">みる</font></Font></A><BR> <A href="Ｍ１/99.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">スライド</font></Font></A></CENTER> </TD></TR></TBODY></TABLE></td> <td><TABLE border="0" width="90" height="90" background="aikon/M2-アイコン2.gif"><TBODY><TR><TD> <CENTER><A href="Ｍ２/00.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">みる</font></Font></A><BR> <A href="Ｍ２/99.htm" target="_top"><Font Face="HG創英角ポップ体"><font color="White">スライド</font></Font></A></CENTER> </TD></TR></TBODY></TABLE></td> </tr> -------------------------------------------------------- JavaScriptの場合 -------------------------------------------------------- <script language="javascript"> function pDsp(id){ var pItems=document.getElementsByTagName("P"); for(var i in pItems){ if(pItems[i].className=="groupABC" && pItems[i].id!=id) pItems[i].style.display='none' } var obj=document.getElementById(id); obj.style.display=(obj.style.display=='none')?'':'none'; } </script> <table width="90" border="0" cellspacing="5" cellpadding="5"> <tr> <td><P onmouseover="pDsp('a')"><img src="aikon/M1-アイコン2.gif" width="90" height="90" border="0" /></P></td> <td><P onmouseover="pDsp('b')"><img src="aikon/M2-アイコン2.gif" width="90" height="90" border="0" /></P></td> </tr> <td><P id="a" class="groupABC" style="display:none"> <nobr> <A href="Ｍ１/00.htm" target="_top"><Font Face="HG創英角ポップ体">みる</Font></A><BR> <A href="Ｍ１/99.htm" target="_top"><Font Size="2"><Font Face="HG創英角ポップ体">スライド</Font></Font></A></P></td> </nobr> <td><P id="b" class="groupABC" style="display:none"> <nobr> <A href="Ｍ２/00.htm" target="_top"><Font Face="HG創英角ポップ体">みる</Font></A><BR> <A href="Ｍ２/99.htm" target="_top"><Font Size="2"><Font Face="HG創英角ポップ体">スライド</Font></Font></A></P></td> </nobr> </table>
- ベストアンサー
- JavaScript
- HTMLのリンクアンカーがおかしい？？？
開発中にふと気が付いたことなのですが、以下のソースをブラウザ（IE5.0）で表示すると、aaaだけ、TABLE内のアンカーの左右でもリンクするようになってしまうのですが、なぜなのでしょうか？？？ <html> <head></head> <body> <table border=0 cellpadding=3 width=730> <tr><td align=center><a href="help_10.asp" target="right"><h2>aaa</h2></a></td></tr> <tr><td align=center><a href="help_20.asp" target="right"><h2>bbb</h2></a></td></tr> <tr><td align=center><a href="help_35.asp" target="right"><h2>ccc</h2></a></td></tr> </table> </body> <html>
- ベストアンサー
- その他(ソフトウェア)
お礼
ご回答頂きましてありがとうございます。 コードを書いて頂き本当に大変助かります。 勉強になりました。 社内の特定の者に見てもらえればよいので、 これでバッチリです。 本当にありがとうございました。