人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

テーブルの中のHTMLの表示方法について教えてください。
よろしくお願いします。
以下にソースをご提示させていただきますので、ご教示方よろしくお願いします。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Shift_JIS"
http-equiv="Content-Type">
<title>あいうえお</title>
</head>
<body>
<table cellspacing="0" height="499" border="0" cellpadding="0"
width="857">
<tbody>
<tr>
<td colspan="2" rowspan="1" bgcolor="#ffffff" valign="top">カキクケコ<br>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top">・ABC<br>
</td>
<td bgcolor="#ffffff" valign="top">ふだんはこのテーブルの中はこの文字で<br>
左側のテーブルの中のABCのリンクを<br>
クリックしたらこの右下のテーブル(このテーブル)の<br>
中だけにABCのリンクの中を<br>
新しいHTMLで表示したい<br>
</td>
</tr>
</tbody>
</table>

●質問者: meichi
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

すいません、質問のイメージがよくわかりにくいかもしれませんが、
下記のようなイメージのホームページをつくりたいのです。よろしく
お願いします。m(_ _)m そもそも私がテーブルの構成でつくろうと
しているのが 無理があるかもしれませんが、
ご教示方よろしくお願いします。
http://www.mai-hidaka.com/


1 ● a-kuma3
●200ポイント ベストアンサー

質問にある HTML のソースをなるべくそのまま使ってみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Shift_JIS"
http-equiv="Content-Type">
<title>あいうえお</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
 $("#anchor").click(function() {
 var s = "<iframe name='display' class='display'></iframe>";
 $("#area").html(s);
 });
});
</script>
<style>
#area {
 width: 90%;
 height: 85%;
}
.display {
 width: 100%;
 height: 100%;
 border: 0;
}
</style>
</head>
<body>
<table cellspacing="0" height="499" border="1" cellpadding="0"
width="857">
<tbody>
<tr>
<td colspan="2" rowspan="1" bgcolor="#ffffff" valign="top">カキクケコ<br>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top"><a href="http://www.yahoo.co.jp/" target="display" id="anchor">ABC</a><br>
</td>
<td bgcolor="#ffffff" valign="top" id="area">ふだんはこのテーブルの中はこの文字で<br>
左側のテーブルの中のABCのリンクを<br>
クリックしたらこの右下のテーブル(このテーブル)の<br>
中だけにABCのリンクの中を<br>
新しいHTMLで表示したい<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

これと、ほぼ同じコードを jsFiddle で書いてみましたので、動きを確認してみてください。
http://jsfiddle.net/a_kuma3/xjV3U/embedded/result/


meichiさんのコメント
さっそく 本当にありがとうございます. 今,パソコンで確認できないのですが jSFidaleって文字コードの違いなのでしょうか すいません、ちんぷん かんぷんです. ちょっとコメントいただけると 大変 ありがたいのですが すいません.

a-kuma3さんのコメント
質問の補足にある URL を見てませんでした。 左側をつつくところは、複数ある想定なんですね。 ちなみに、左側をつついた後に、右側に表示される内容は、どこに書きますか? この HTML の中? それとも、別の HTML でしょうか。 もし、別の HTML に書きたいのだったら、javascript なんて使わずに、iframe だけを使えば、良さそうな気がしました。

質問者から

すいません、今帰ってきました。コメントありがとうございます。m(_ _)m
>ちなみに、左側をつついた後に、右側に表示される内容は、どこに書きますか?
>この HTML の中? それとも、別の HTML でしょうか。
↑おっしゃるとおり、左側のつつくところは、複数予定しています。
内容は、このHTMLの中にするつもりです。今日は ちょっと無理
なのですが 作業をすすめてみます。ありがとうございました。
これで 質問を終了します。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ