WEB相談室

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

タイトル:テーブル1行選択表示について

0:[投稿] aiko [2002/09/17 17:03 ][環境:WIN+IE WIN系+OTHER]

以下の様なソースで、
クリックされたら、頭に選択マークが表示されるというものを作りたいのですが、
    obj.background="Click.gif";

と指定すると、
Click.gifが<td>タグの中に何個も表示されてしまいます。
1つのClick.gif画像のみを表示させたいのですが。
backgroundという表記が間違っているのでしょうか。


<html>
<head>
<title>選択サンプル</title>
<script language="JavaScript">
<!--
var now_sel_obj = -1;

function Click(obj, clickNo)
{
    if( now_sel_obj )
    {
        now_sel_obj.background="";
    }

    obj.background="Click.gif";

    now_sel_obj = obj;
}
-->
</script>
</head>
<body>
<table border="1" width="235">
   <tbody>
       <tr>
           <td width="30"> </td>
           <td align="center" width="19">NO</td>
           <td align="center" width="126">NAME</td>
       </tr>
       <tr>
           <td width="30" onClick="Click(this, 1);" > </td>
           <td align="center" width="19">1</td>
           <td width="126">aaaaa1</td>
       </tr>
       <tr>
           <td width="30" onClick="Click(this, 2);"> </td>
           <td align="center" width="19">2</td>
           <td width="126">aaaaa2</td>
       </tr>
       <tr>
           <td width="30" onClick="Click(this, 3);"> </td>
           <td align="center" width="19">3</td>
           <td width="126">ccccc3</td>
       </tr>
       <tr>
           <td width="30" onClick="Click(this, 4);"> </td>
           <td align="center" width="19">4</td>
           <td width="126">ddddd4</td>
       </tr>
   </tbody>
</table>
</body>
</html>


1:[回答] 29歳からのPerl [2002/09/18 01:31 ]

この場合、(このtdの場合にて)
background(Image)は、tdの背景プロパティなのでタイリングされます。
tdの大きさを指定してコントロールする事は可能ですが、

それよりも、以下の方法でimageオブジェクトを操作されたらどうでしょうか?
<td><img name="byName" (id="byID") ... onClick="click(this)";></td>

もしくは、より適用ブラウザが広がる(リンカーゆえの問題あり)
<td><a ... onClick="click(this)";><img name="byName" ... /></a></td>

少し視点を変えてみて、
<td><input type="checkbox" ...></td>

付録
<td> </td>の部分ですが、ブラウザのバージョンにより空td扱いになると思いますよ。


2:[回答] gun [2002/09/18 10:25 ]

ちょっと乱暴(?)にやるなら、aikoさんのソースに
下のようにstyleを書き加えることでも可能です。
-------
<style>
td {
background-repeat:no-repeat;
}
</style>
------


3:[回答] aiko [2002/09/18 16:06 ]

gunさんのやり方でとりあえず解決しましたm(_ _)m

>ちょっと乱暴(?)にやるなら、
でも何で乱暴なのですか???

29歳からのPerl さん
><td><img name="byName" (id="byID") ... onClick="click(this)";></td>
つまりはどういうことでしょう。
すみません…


4:[関連] aiko [2002/09/19 10:00 ]

上記質問の関連なのですが、
@<td width="30" onClick="Click(this, 1);"> </td>
のように、Click()の引数にthisを渡していますが、
例えば他の<td>からClick()を呼び出すとき、@のelementの取り方はどのようにすれば良いのでしょうか。
<form name="fm">
<td name="a" onClick="Click(this,1);">
<td onClick="Click(documnet.fm.a,1);">
としてもダメでした。

これをやりたい理由は、他の<td>をクリックしても、選択画像が表示されるようにしたいためです。

よろしくお願いします。


5:[回答] gun [2002/09/19 14:15 ]

なぜ乱暴か。
td でonClickイベントを拾おうとしてることを
根本的に解決してないからです。
(少なくとも、NC4.78ではtd でonClickイベントは発生してません)

@についてはIEでしか動作しない回答しかできませんので、
識者の方におまかせします。。。

丸付き数字(@、A・・・)はWin系のみ(?)でしか表示できませんから、
使うと文句言われることもありますのでご注意。


6:[質問] aiko [2002/09/20 17:03 ]

>td でonClickイベントを拾おうとしてることを
適用ブラウザが限られるということでしょうか。
そもそも一般的に選択表示ってどうしてるのでしょう。
チェックボックスだったら、必ずどれかがチェックされているという状態を保持するのがむずかしいですよね。
インアクティブ状態だったらできるのかもしれないですけど、
見にくい気がするし…


>@についてはIEでしか動作しない回答しかできませんので、
識者の方におまかせします。。。

たびたびの質問で恐縮ですが、
分かる方よろしくお願いしますm(_ _)m


7:[回答] gun [2002/09/20 19:29 ]

>適用ブラウザが限られる
それです。言葉が上手ですね(^^)

一般的な選択表示を地味に実現するなら、ラジオボタンですよね。
<input type="radio"・・・>
かなり地味です。

--IEでしか動作しない回答---
下のように、<tr>にラベルを付けちゃうていう力技でも動作します。

<label for="id01">
<tr>
<td width="30" id="id01" onClick="Click(this, 1);"> </td>
<td align="center" width="19">1</td>
<td width="126">aaaaa1</td>
</tr>
</label>
<label for="id02">
<tr>
<td width="30" id="id02" onClick="Click(this, 2);"> </td>
<td align="center" width="19">2</td>
<td width="126">aaaaa2</td>
</tr>
</label>


8:[関連] aiko [2002/09/20 22:08 ]

gunさんありがとうございました。
かなり力技ですが(^^;)きちんと動作しました。

…というところで、 完了マークをつけたかったのですが、
もうひとつだけ、知りたいことが出てきました。

画面表示時に、1の選択欄に選択画像をデフォルト表示させておきたいのです。
その後は、2番をクリックしたら選択画像が1→2の欄に移動。
というようなことが出来ると便利だな〜と考えています。

<td width="30" background="Click.gif" onClick="Click(this, 1);">
と記入することも考えましたが、
そうすると1番の選択が残ったままになってしまいます。
(まあ、それは当たり前なんですが…)

なにか上手い方法はありますでしょうか。

何度も質問して恐縮ですが、わかる方いらっしゃいましたら
よろしくお願いします。


9:[回答] gun [2002/09/24 09:49 ]

ラベルを付けたときの id を利用することで、解決できます。
(これでもぅ、IEから抜け出せないカラダですね。。。)

<body onLoad="Click(document.all('id01'), 1);">


--IEを抜け出せないついでに、カーソルを"指"にする方法--
   :
(省略)
   :
<style>
   :
(省略)
   :
.clHand {
   cursor: hand;
}
</style>
   :
(省略)
   :
<label for="id01">
<tr class="clHand">
   <td width="30" id="id01" onClick="Click(this, 1);" > </td>
   <td align="center" width="19">1</td>
   <td width="126">aaaaa1</td>
</tr>
</label>
   :
(省略)
   :

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World