WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:セルの内容を変更するには?

0:[投稿] lovin [MAIL] [2002/08/19 00:53 ][環境:WIN+NN UNIX系+Java]

お世話になっております。
NN4.7x, NN6.x にて<TABLE>タグのセルの内容を変更することは可能でしょうか?

<table>
<tr>
 <td>×</td>
 <td><a href="javascript:void(0)" onClick="func();">Go!</a></td>
</tr>
<tr>以降、数百行が続く...</tr>
</table>

上記のGo!をクリックした時に「×」を「○」に書き換える方法がありましたら教えてください。
func( 行番号 )という呼び出しが必要かもしれませんが、
それについてはサーバー側でhtmlを生成しているので可能です。

よろしくお願い致します。(__)


1:[回答] 謎… [2002/08/19 01:11 ]

Netscape 4.x はレガシーなので良く知りませんが、
Netscape 6.x や MSIE5以上レベルのブラウザなら簡単です。

<head>
<script type="text/javascript">
function func(obj) {

    prevCell = obj.parentNode.previousSibling;
    prevCell.firstChild.nodeValue = "○";

}
</script>
</head>

<body>

<table>
<tr><td>×</td><td><a href="javascript:void(0)" onClick="func(this);">Go!</a></td></tr>
<tr><td>×</td><td><a href="javascript:void(0)" onClick="func(this);">Go!</a></td></tr>
<tr><td>×</td><td><a href="javascript:void(0)" onClick="func(this);">Go!</a></td></tr>
</table>

</body>

※ tdタグとtdタグの間に空白文字を挿入しないでください。


2:[回答] 謎… [2002/08/19 01:15 ]

補足:

>>1 のスクリプトはDOMを利用しています。
http://www.parkcity.ne.jp/~chaichan/src/javascdom00.htm


3:[質問] lovin [MAIL] [2002/08/19 01:33 ]

ありがとうございます。NN6.0で動作確認とれました。
ご指摘の通りNN4.7x系ではDOMに対応してないんですね。
うーん、困りました。
<input type="radio" value="×" onClick="...">
とかに変更するしかないのかな...


4:[回答] 謎… [2002/08/19 01:59 ]

Netscape 4.x 対応スクリプトを書いて見ましたが、
id属性を付けなければならないのと、
CSSで絶対配置しなければならないので不便です。

それと、ボーダーのレンダリングが変になってしまいます。

他の方法に変更した方が良いかもしれませんね。^^;

<head>
<script type="text/javascript">
function func(objName) {

    if (document.getElementById) {
        document.getElementById(objName).firstChild.nodeValue = "○";
    }
    else if (document.layers) {
        with (document.layers[objName]) {
            document.open();
            document.write("○");
            document.close();
        }
    }

}
</script>
</head>

<body>

<table>
<tr>
    <td style="position:absolute;top:1em;left:1em;" id="maru_batsu1">×</td>
    <td style="position:absolute;top:1em;left:2.2em;">
    <a href="javascript:void(0)" onClick="func('maru_batsu1');">Go!</a></td>
</tr>
<tr>
    <td style="position:absolute;top:2em;left:1em;" id="maru_batsu2">×</td>
    <td style="position:absolute;top:2em;left:2.2em;">
    <a href="javascript:void(0)" onClick="func('maru_batsu2');">Go!</a></td>
</tr>
<tr>
    <td style="position:absolute;top:3em;left:1em;" id="maru_batsu3">×</td>
    <td style="position:absolute;top:3em;left:2.2em;">
    <a href="javascript:void(0)" onClick="func('maru_batsu3');">Go!</a></td>
</tr>
</table>

</body>


5:[完了] lovin [MAIL] [2002/08/19 21:00 ]

サンプルありがとうございました。(__)

他のやり方と合わせて検討してみます。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World