外部ファイルで表を読み込む方法

このQ&Aのポイント
  • 表を外部ファイルとして読み込む方法について知りたいです。
  • 表は随時変更する必要があるため、各ページを修正せずに読み込む方法を教えてください。
  • JavaScriptファイルを使用して読み込む方法についても検討しましたが、構文エラーが発生しています。他の方法があれば教えてください。
回答を見る
  • ベストアンサー

表を外部ファイルとして読み込む方法

<TABLE border="1"> <TBODY> <TR> <TD><A href="1.html">1</A></TD> <TD><A href="2.html">2</A></TD> <TD><A href="3.html">3</A></TD> <TD><A href="4.html">4</A></TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> <TR> <TD>9</TD> <TD>10</TD> <TD>11</TD> <TD>12</TD> </TR> <TR> <TD>13</TD> <TD>14</TD> <TD>15</TD> <TD>16</TD> </TR> </TBODY> </TABLE> 上記のようの表を、複数のページで読み込ませたいのです。 表は随時変更する為、各ページをいちいち修正しなくてはなりません。 ですので外部ファイルとして、上記の表を作り、各ページで読み込む方法はあれば教えていただきたいです。 <script language="JavaScript" src="test.js"></script> という感じでと読み込めるかと思いましたが、jsファイルの方に構文エラーが出てしまうようです。 jsファイルの書き方が悪いのか、もしくは無理なのか、他に方法があるのか、 もし分かりましたらよろしくお願いしますm(__)m

  • ShinX2
  • お礼率57% (100/175)

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

javascriptの構文に従って書けばできるはずです。 document.write( '<TABLE border="1">', '<TBODY>', '<TR>', ・・・・ '</TABLE>' )

ShinX2
質問者

お礼

できました! ありがとうございましたm(__)m

ShinX2
質問者

補足

ありがとうございます。 何とか読み込めました。 しかし、日本語が文字化けしてしまいます。

関連するQ&A

  • 外部ファイルを利用したい

    現在、Webの勉強を始めたのですが、自分でいろいろ作成していてうまくいかないので、教えて下さい。 htmlファイルが幾つかあるのですが、全てのページに同じテーブルタグを使用するので、JavaScriptの外部ファイルで書き出してそれぞれを各htmlファイルで呼び出そうと思っていますが、うまくいきません。 ★jsファイル/xx.js★ <SCRIPT language="JavaScript"><!-- document write("<table border='1'"); document write("<tr><td><img src='xx.gif'></td></tr>"); document write("</table>"); --> ★htmlファイルでの呼び出し★ <html> <head><title>外部ファイル呼び出し</title></head> <body><script language="JavaScript" src="xx.js"></script> </body></html> かなり素人なので変な書き方をしていると思いますが、ご指導お願いします。

  • 自動で表作成

    ぜひご教授ください。 以前、問合せていただいたものの延長です http://oshiete1.goo.ne.jp/kotaeru.php3?q=2261428 データをhtmlに、ジャバスクリプトで表にしようとしていて、ジャバスクリプトファイル(a.js)とデータは別ファイル化(b.jsとc.js)することを前提にしています。 いざ作りはじめたところ、データが多いことがわかったので、表を2列にしたものにできないか、と考えたのですが、その場合、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"

  • ScriptがTABLEタグの中に表示されません。

    下記の様にScriptを使ってTABLEタグの中に表示させようと思ったのですが、test2.jsの「あれ?」がTABLEタグ欄に表示されません。 何方かご教授してもらえませんか? ↓↓↓↓<HTML File>↓↓↓↓ <HTML><BODY> <script src="./test1.js"></script> </BODY></HTML> ↓↓↓↓<test1.js File>↓↓↓↓ document.open(); document.write("<TABLE border=1><TBODY><TR><TD>1</TD><TD>おや?<script src=\"./test2.js\"></script></TD></TR><TR><TD>1</TD><TD>1</TD></TR></TBODY></TABLE>"); document.close(); ↓↓↓↓<test2.js File>↓↓↓↓ document.open(); document.write("あれ?"); document.close();

  • 表を無理やり100%に?

    自分で作成した下記のようなページがあり、 <A HREF="#" onclick="★">巾変更</A> <TABLE BORDER="1"> <TR><TD>氏名</TD><TD>住所</TD></TR> <TR><TD></TD><TD></TD></TR> <TR><TD></TD><TD></TD></TR> </TABLE> これを前提として、 javascriptにて、★をクリックすると 表のWIDTHを[100%]と[指定なし]、交互に変更するようなことはできますか。

  • htaファイルでFor文

    htaファイルでFor文を用いて表(Tableタグ)を動的に出力する事は可能でしょうか。 例えば <html> <head> <title></title> </head> <body> <table> <script language="VBScript"> Dim i For i = 1 To 50 </script> <tr> <td>a</td> <td>a</td> <td>a</td></tr> <script language="VBScript"> Next </script> </table> </body> </html> 実際にサンプルを作成しましたがエラーが発生してしまいました。 もしかしてできないのでしょうか。 ご存知の方がいましたらアドバイスいただけませんでしょうか。 何卒、皆さんのお知恵を私にお貸しいただけたら幸いです。 どうか、宜しくお願いします。 では、失礼します。

  • 外部ファイルを読み込めない

    初めまして。いつも質問やその回答を読ませていただいて、参考にさせていただいてます。 javascriptで作った超簡単なプログラムが動かないんです。 どなたか、助けてください。(>_<) 以下、test.htmlとtest.jsを作って、試して見ているのですが、動かない理由が分からず苦しんでいます。 =============test.html============= <html> <head> <script type="text/javascript" language="javascript" src="./test.js" ></script> </head> <body> <table> <form name="form2" method="post" onSubmit="return check()"> <tr><td><input type="text" name="names" size="50"></td></tr> <tr><td><input type="submit" name="submit" value="予約"></td></tr> </form> </table> </body> </html> =============test.html============= =============test.js============= function check(){ names=document.form2.names; if(names.value == ""){ alert("お名前を入力してください。"); names.focus(); return false; } else return true; } =============test.js============= どちらも、同じディレクトリに入れています。safari、ieでも×です。 どなたか、教えていただけませんでしょうか。

  • firefoxで表の表示切替操作の異常

    以下のコードはIE ver.7では正常に作動しますが、firefoxで表示/非表示を繰り返すとおかしくなり表がどんどん広がっていきます。 どこが間違っているのでしょうか。 firefoxでも正常に作動する方法をよろしくご教示お願いします。 ================================================= <html><head> <script language="javascript"><!-- [CDATA[ window.onload = function(){ var body = document.getElementById("body"); var toggle = document.getElementById("toggle"); toggle.onclick = function(){ if (body.style.display == "none") { body.style.display = "block"; } else { body.style.display = "none"; } return false; } } //]] --></script><noscript></noscript> </head><body> <table border="1" ><tbody> <tr><td>[<a href="#" id="toggle">表示切替</a>]</td></tr> <tr id="body"><td>こんにちわ</td></tr> </tbody> </table> </body></html> =================================================

  • 文字をオンマウスすると、画像がかわり、クリックで他のページへいくようにしたい。

    初めてJavaを使いました。 『文字にマウスを当てると、上に置いた画像がかわり、さらにその文字をクリックすると、他のページにいくようにしたいのです』 文字にマウスを当てると、上に置いた画像が変わるとこまではできましたが、どうしても他のページへのリンクができません。 よい方法を教えてください。 作ったHTMLは以下のとおりです。 <SCRIPT language="JavaScript"><!-- function myChgPic(myPicURL){ document.images["myBigImage"].src = myPicURL; } // --></SCRIPT> <TABLE align="center"> <TBODY> <TABLE border="0" align="center"> <TBODY> <TR> <TD><IMG src="ankor.jpg" name="myBigImage" border="2"></TD> </TR> <TR> <TD><A href="javascript:void(0)" onmouseover="myChgPic('shanghai.jpg')">上海 <br> <A href="javascript:void(0)" onmouseover="myChgPic('italy.jpg')">イタリア <br> <A href="javascript:void(0)" onmouseover="myChgPic('canada.jpg')">カナダ    </A>    </TD> </TR> </TBODY> </TABLE> 上海、カナダ、イタリアという文字をクリックしたら、その写真にかわり、文字をクリックしたらそれぞれのページにリンクさせたいのです。

  • JQueryでクリックされた文字を取得したい

    テーブルがあり、連番が 1 2 3 と振ってあります。 その文字情報をJQueryで取得するにはどのように記述すれば良いのでしょうか? 例)1をクリック → 1 を取得。 <table border="1" width="150"> <tbody> <tr> <td width="50"><a href="#">1</a></td> <td>田中</td> </tr> <tr> <td><a href="#">2</a></td> <td>佐藤</td> </tr> <tr> <td><a href="#">3</a></td> <td>鈴木</td> </tr> </tbody> </table> ご存知の方教えて下さい。

  • HTMLページに外部テキストファイルを取り込むには?

    HTMLのページに、一部だけ外部ファイルのデータを取り込もうとしています。 <HTML> <BODY> <P><TABLE WIDTH="450" > <TR> <TD><IMG SRC="picture1.jpg"></TD> <TD >ここにJavascriptで自由更新文(1)を入れる</TD> </TR> </TABLE><BR> <TABLE WIDTH="450"> <TR> <TD><IMG SRC="picture2" ></TD> <TD>ここにJavascriptで自由更新文(2)を入れる</TD> </TR> </TABLE> </BODY> </HTML> 上のような、写真と説明文がセットになったテーブルがいくつか配置されているページがあるとします。 その説明文を、HTMLを見たこともない人物に自由に更新してもらわねばなりません。 そこで、例えば「1つめの写真の説明文は1.dat、2つめの写真の説明文は2.dat …と、単純にテキストだけを打った.datとか.txtファイルをサーバにアップロードしてもらい、htmlページはJavascriptでその.datファイルをテーブル内に読み込むようにして使いたいのですが、そのJavascriptはどんな書き方をすればよいでしょうか? <script type="text/javascript" src="1.js"></script>といったように読み込む場合、1.jsの内容は単純なテキストでなく document.write("これは例文です。"); // End といったように、ソースになっていなければダメですよね? これでは間違って「"」等を消されたらファイルが壊れてしまいます。このため、こういう内容でなく、「document.write("」や「");」や「// End 」も無い、単純なテキストだけを外部ファイルにすることはできないでしょうか?

専門家に質問してみよう