テーブルの中の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>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/04/14 09:57:57
  • 終了:2013/04/14 20:57:42
id:meichi

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

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4524ベストアンサー獲得回数18802013/04/14 10:47:41

ポイント200pt

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

  • リンクを A タグにして、target なんかを入れた
  • リンク先を表示する TD に id をつけた
  • リンク先を表示する TD をスタイルで大きさ(幅、高さ)を指定した
  • jQuery を使います
  • TABLE に border="1" を指定した(実際に使うときは、消してください)
<!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/

id:meichi

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

2013/04/14 11:17:15
id:a-kuma3

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

2013/04/14 12:55:50

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4524ベストアンサー獲得回数18802013/04/14 10:47:41ここでベストアンサー

ポイント200pt

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

  • リンクを A タグにして、target なんかを入れた
  • リンク先を表示する TD に id をつけた
  • リンク先を表示する TD をスタイルで大きさ(幅、高さ)を指定した
  • jQuery を使います
  • TABLE に border="1" を指定した(実際に使うときは、消してください)
<!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/

id:meichi

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

2013/04/14 11:17:15
id:a-kuma3

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

2013/04/14 12:55:50
id:meichi

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません