JavaScript表示テキストを同じ画面で再表示させたい

[新着] Webテンプレートを仮オープンしました



0   名前: KEN : 2007/01/02(火) 13:30  ID:DYbf4r/q
以下のような感じでボタンを押すと数値が加算する
コードを作ってみたのですが、2回目のdocument.write
で新しいページを作成してしまうのですが、同一ページを
更新することは出来ないでしょうか?

<html>
<head>
<title>数値加算</title>
</head>

<body>
<script type="text/Javascript">
<!--
var text = 1;
document.write("数値加算",text);

function text_print(){
text+=1;
// document.write("数値加算",text);
}
//-->
</script>

<input type="button" value="書き換え" onClick="text_print()">
</body>
</html>

1   名前: 匿名 : 2007/01/02(火) 13:30  ID:fUX02C0H
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>数値加算</title>
<p id="result">0</p>
<p onclick="
    var textNode = document.getElementById ('result').firstChild;
    textNode.data = parseInt (textNode.data) + 1;
">書き換え</p>

2   名前: KEN : 2007/01/02(火) 13:30  ID:8/cEVNVv
早速ためしてみて動作することを確認しました。

実際のプログラムでは数値表示を表で行うのでソースを
改造して試してみたのですが、タグをそのまま表示して
しまうことが分かりました。
HTMLコードとして表示するのは無理なのでしょうか。

もし駄目となると、インラインフレームをテストすることも
考えています。以下に変更したコードを乗せました。
よろしくお願いします。m(__)m

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script language="JavaScript">
<!--
function Update()
{
var textNode = document.getElementById ('result').firstChild;
textNode.data = "<table><tr><td>a</td><td></td></tr></table>";
//textNode.data = parseInt (textNode.data) + 1;
}
//-->
</script>
<title>数値加算</title>
</head>

<body>
<p id="result">1</p>
<input type="button" value="書き換え" onClick="Update()">
</body>
</html>

3   名前: 匿名 : 2007/01/02(火) 13:30  ID:fUX02C0H
>>2
何をやりたいのかもっと詳しく。どんな目的で table 要素を動的に生成するの?

あと、その HTML は無茶苦茶だよ……。

4   名前: 匿名 : 2007/01/02(火) 13:30  ID:fUX02C0H
補足。

表計算のようなことがしたいのなら、そもそも table 要素を生成する必要などない。各セルのデータを取得して操作すれば良いだけの話。HTML はデータ構造をマークアップするものなんだから、その性質を活用しない手はない。

table 要素を動的に変更しなければならない場合、IE を対象にするかどうか、どの部分を書き換える必要があるかで微妙に変わってくる。少なくとも、IE の Table Object Model では、table 要素と tr 要素の innerHTML は読取専用なので、工夫が必要になる。

この掲示板には、質問のテンプレートが用意されているみたいだから、情報を整理すべし。

5   名前: KEN : 2007/01/02(火) 13:30  ID:GRTPnbm.
失礼いたしました。もう少し詳しく話しますとTableを動的に行数を変えたいのです。
Aフレームから情報を送り、Bフレームの配列に追加してその配列を表で表示します。
そのためAフレームからのデータで配列がたまれば表の行数が増えます。
また、行数を減らすこともできるようにしたいのです。

VC6.0、VB、C++Builderはプログラミングできるのですが、HTMLで
これを実現してホームページで活用したいのです。

現在私が調べたところでは、Documet.write()では新しいページを開くため、HTMLを
完全に書き込むのは現実的ではないし、匿名さんのレスのidを使うのがどこまでできるかは
?です。インラインフレームしかないかと考えましたがまだテストしてません。

よい案がありましたらよろしくお願いします。
(必要でしたら再質問したいと思います。)

6   名前: 匿名 : 2007/01/02(火) 13:30  ID:fUX02C0H
> Tableを動的に行数を変えたい

HTMLTableElement#insertRow()
HTMLTableElement#deleteRow()

http://www.yscjp.com/doc/table1.html
http://www.yscjp.com/doc/table2.html

table 要素は、DOM ツリー上で HTMLTableElement というインタフェースを持つオブジェクトとして表現される。このインタフェースは、表を操作するためのメソッドを沢山持っている。

DOM API を使える環境(最近のブラウザを含む)で、タグ付きのソースを生のまま扱う機会はそう多くない。その辺、CGI/Perl なんかで文字列をガリガリ書き換えるやり方とは根本的に異なる(まあ、Perl にも XML::DOM モジュールがあるが)。

7   名前: KEN : 2007/01/02(火) 13:30  ID:XAwFSN1Z
レスありがとうございます。m(__)m

テストして、結果を報告したいと思います。
ありがとうございました。

8   名前: KEN : 2007/01/02(火) 13:30  ID:KR2.UnU.
ありがとうございました!ヽ(´▽`)/

ぶじ解決できました。

本当に、なんどもありがとうございました。

一覧へ戻る