テーブルの外にマウスを出したらイベント・・・(2nd)

締切済

質問者：nyonta
質問日時：2002/02/02 05:42
回答数：5件

すいません。この質問２度目デス。
少し状況が変わり、用は

・tableタグからマウスが出たら、イベント(ページを変える。)を発動。

という事をやりたい訳なんですが、、、いくつか問題が有って、
条件
・table内にはtr、tdがたくさんあるものとする。
・（諸事情により、imgで架空的なtableは作りたくない。）
・html＋javascriptのみで作成したい。
・動作環境はIE5.0以上のみでよい。
・（知らない人の為に書きますが）セル間の所は（space等をすべて0にしても）ど　うやらブラウザがtable上と認識しないみたいです。
・安易な「できません。」という回答はやめて下さい。

凄い複雑なスクリプトになってもいいので(見にくくてもいいので)、よろしくお願いします。出来れば、早めがいいですが、気長に待ちます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「ie互換ブラウザ」に関するQ&A： IE互換の動作の軽いタブブラウザは？

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： pureh
回答日時：2002/02/06 00:03

Ｎｏ３の回答は、忘れて下さい。

補足でおっしゃられていたとおり、<tr><td>に引っかかりますね。
確認のやり方を間違えていたようです。

お騒がせしました。ゴメンナサイ

- 0
- 件

通報する

No.4

回答者： makokoko
回答日時：2002/02/04 13:55

purehさんの言う通り、onmouseleaveを使う方法が一番無難でしょうねぇ。

- 0
- 件

通報する

No.3

回答者： pureh
回答日時：2002/02/04 00:19

Ｎｏ．２で回答した者です。

onmouseleaveを使わなくても、

<DIV onmouseout="....">
<table>
～
</table>
</DIV>

のように、<DIV>でtable全体を囲ってもできますね。

他のブラウザとの互換性に関しては、全くところ無知ですが、
onmouseleaveは、ＩＥ限定か、マイナーみたいですし・・・

この回答への補足

回答ありがとうございます。
しかしonmouseoutでうまく起動しないので・・・
もちろん、<DIV onmouseout="...."> も試しましたが、やはり<tr><td>でバグ？
が起きてしまいます。
ちゃんと、書かなくてすいません。
onmouseleaveは試してないのでやってみます。
ちなみに、IE限定とは知りませんでした。
ありがとうございます。

補足日時：2002/02/04 20:30

通報する

- 0
- 件

通報する

No.2

回答者： pureh
回答日時：2002/02/03 22:55

＃１の方とのやり取りで、問題点が理解できました。

<table>タグで、onmouseleave を使ってみてください。

ＷＩＮのＩＥ６で、onmouseoutと動作を比較してみました。
たしかに、onmouseoutは、おっしゃっているような反応をしますね。
ただ、セルから出た時に共通の処理をしたい向きには、<table>タグに
これ一つおくだけでいいので、これはこれでいいのではないかと思います。

- 0
- 件

通報する

No.1

回答者： Kizz
回答日時：2002/02/03 19:37

はじめまして、nyontaさん。

1stは知らないので、これはご存知なのかも？ですが、この質問からはこの答えで充分
かと思うので、一応全く複雑なことはしてませんが、
　（条件）
　　・tableタグからマウス（フォーカス解除）が出たら・・というイベント取り
　　・IE限定でいい　※因みにWindowsのIE5.5で確認
という事で参考までに。

<table>タグに属性として以下を定義
　onMouseOut="location.href='ＵＲＬアドレス';"

参考）フォーカスがついた時用は以下の通り。
　　　フォーカス付き・解除の組み合わせでなんかしたいのであれば・・と一応までに。
　onMouseOver="処理"

補足）
　・この　onMouseOut,onMouseOverは他のタグでも使えるイベントハンドラです。
　　※メジャーは<a>に設定し、画像とかステータスバーへの表示をしたりしますね。
　・<a>はＯＫですが、<table>タグでのこの属性は、Netscapeでは効きません。
　　※MacのIEでいけるかは不明です。

参考までに。
がんばってくださいね。

この回答への補足

回答、ありがとうございます。イベントハンドラはもちろん使わないと出来ませんが、
<table>にonmouseout付けるだけでは、<tr>、<td>を乗り越えるときにもイベント
が発動してしまうのです。(おそらくバグらしいデス・・・)
そこで、何か良い方法が無いのでしょうか。よろしくお願いします。

ちなみに、WinのIEだけで良いです。

補足日時：2002/02/03 21:37

通報する

- 0
- 件

通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

質問する（無料）

他の専門家の回答をチェック

このQ&Aと関連する良く見られている質問

QDOMでtableにtr要素を追加する

テキストデータが入った行をHTMLのテーブルに追加したいのですが、
tr要素をappendChildすると、下図の（B）に追加されますが、
それを（A）に追加するようにしたいのですが、どう書けば
良いのでしょうか？

<table>
<tbody>
　←（A）
<tr>...</tr>
<tr>...</tr>
　←（B）
</tbody>
</table>

また、tbodyの子要素(tr)を消すことはできますか？
際限なく長いテーブルになっても困るので・・・
以上よろしくおねがいします

Aベストアンサー

<tbody id="a">
.....
----------
var addtr =document.createElement('tr');
var tbody = document.getElementById('a');
var tbody.insertBefore( addtr, tbody.firstChild );
--------
while( tbody.hasChildNodes() ) tbody.removeChild( tbody.lastChild );

他の回答も見る

Qtableのtrの要素数を番号順に取得したい

現在、tableでのデザインを考えています。
やりたい事はテーブルにマウスカーソルを合わせた際にカーソルを合わせた行の色を変えるというものです。またjavascriptは外部ファイル化したいと考えていますが、javascriptの知識がなく困っておりまして
申し訳御座いませんが皆様どうぞよろしくお願い致します。
http://www.tagindex.com/kakolog/q2bbs/1/114.html
こちらのページの2005/07/27 16:50に投稿された方のソースを参考に
html内ではこのような感じで
<body onload="CellColorAlternate();">
テーブ...続きを読む

Aベストアンサー

//外部スクリプト
window.onload=function(){
var TRs = document.getElementsByTagName("tr");
var len = TRs.length;
for(var i=0;i<len;i++){
TRs[i].onmouseover=function(){ this.style.backgroundColor="#CFC"; };
TRs[i].onmouseout=function(){ this.style.backgroundColor=""; };
}
};
…
body と table には特になにも付加する必要はありません。
<body>
<table>

他の回答も見る

Qtableの中のtableが追加できない。

罫表追加ボタンを押すと既存のtableの中に新しくtableを追加する
処理を作成しましたが、追加した罫表が正しく表示されません。

罫表追加後、innerHTMLでテキストボックスに表示し、それをコピーして、HTMLで開いてみるときちんと追加されているようです。

なぜtableの中のtableが作られないのでしょうか。
別の方法でも良いので、ボタンをおした時に動的にtableの中にtableを追加する方法ありますでしょうか。

以下HTMLとjsです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="kei_test.js"></script>
</head>
<body>
<div>
<input type="button" value="罫表追加" onclick="addDanraku('keihyou')" />
</div>

<form name='form1'>
<input type="text" name="strJbnTxt" size=100 maxlength=10000 />
</form>
<table width="100%" border=1 style='border-collapse:collapse;border:none'>
<tr>
<td style='width:100.0%;border:solid windowtext 1.0pt'>
<p>あいうえお。</p>
</td>
</tr>
<tr>
<td style='width:100.0%;border:solid windowtext 1.0pt;'>
<p>かきくけこ。</p>
</td>
</tr>
</table>
</body>
</html>

以下jsファイル

var cellCnt = 0;
var rowArray = new Array(100);
var colArray = new Array(100);

window.onload = init;

function init(){

var mouseFlg = 0;
var col;
var row;

var td = document.getElementsByTagName("td");
var length = td.length;

//alert('td数:'+length);

for(var i = 0; i < length; i++) {
td[i].onclick = function (){

this.style.backgroundColor = "yellow";

//列番号取得
var befTd = this.previousSibling;
var col = 0;
while(befTd){
if(befTd.nodeName=="TD")col++;
befTd=befTd.previousSibling;
}

//行番号取得
var befTr = this.parentNode.previousSibling;
var row=0;
while(befTr){
if(befTr.nodeName=="TR") row++;
befTr=befTr.previousSibling;
}

rowArray[cellCnt] = row;
colArray[cellCnt] = col;

cellCnt = cellCnt + 1;
}
}
}

function addDanraku( danraku ){

if( cellCnt != 1){
alert("１つのみ選択して実行してください。");
return;
}

//trを取得
var trNode = document.getElementsByTagName("tr");
var trLength = trNode.length;

for(var i = 0; i < trLength; i++) {

if( i == rowArray[0]){

//新しい段落（tr）を追加
var newTr = document.createElement("tr");

var nextTr = trNode[i].nextSibling;
var oyaTable = nextTr.parentNode;
oyaTable.insertBefore(newTr, nextTr);

//tdを追加
var newTd = document.createElement("td");
newTd.style.width = "100.0%";
newTd.style.border = "solid windowtext 1.0pt";
newTr.appendChild(newTd);

//tableノードを追加
alert(newTd.nodeName);

var newTable = document.createElement("table");
newTable.style.border = "none";
newTable.style.borderCollapse = "collapse";
newTd.appendChild(newTable);

//trノードを追加
for(var j = 0; j < 2; j++) {

var newTr2 = document.createElement("tr");
newTable.appendChild(newTr2);

for(var k = 0; k < 2; k++) {

//tdノードを追加
var newTd2 = document.createElement("td");
newTd2.style.width = "100.0pt";
newTd2.style.border = "solid windowtext 1.0pt";
newTr2.appendChild(newTd2);

//pノードを追加
var newP2 = document.createElement("p");
newTd2.appendChild(newP2);

//textノードを追加
var newText2 = document.createTextNode("追加テスト");
newP2.appendChild(newText2);

}
}
}
}
form1.strJbnTxt.value = newTr.parentNode.parentNode.parentNode.innerHTML;
}

Aベストアンサー

あんまりちゃんと見てませんが、tbodyを扱っているでしょうか？
tbodyは1つの場合書かなくてもよい事になっていますが、記述の省略が許されているだけで、必ず存在します。
Javascriptで生成する場合、ちゃんとtbodyを扱わないと、
tableに直接trをappendChildで追加しても表示されないのかも？

他の回答も見る

QTableの枠線（内・外）色を変更

Tableの枠線（内・外）色を変更する場合、
CSSだと、

.Table {
border-color:#FFFFFF;
}
.Table TD{ border-color:#FFFFFF;}
.Table TR{ border-color:#FFFFFF;}

で変更できますが、
これをJacasvriptで対応するにはどのようにしたらいいのでしょうか？

FireFoxもIEも対応したいと思っています。
BorderColor="#FFFFFF"だけだと、
FireFoxで枠線の外側しか変更できません。

たぶんCSSと組み合わせる必要があると思います。

よろしくお願いします。

Aベストアンサー

こんにちは

こんな感じ？

<script type="text/javascript"></script>

<style type="text/css">
#Table { border:1px solid; }
td { border:1px solid; }
</style>

<table id="Table">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>&...続きを読む