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

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

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

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

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

A 回答 (5件)

No3の回答は、忘れて下さい。


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

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

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

    • good
    • 0

No.2で回答した者です。

onmouseleaveを使わなくても、

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

</table>
</DIV>

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

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

この回答への補足

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

補足日時:2002/02/04 20:30
    • good
    • 0

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



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

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

はじめまして、nyontaさん。



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

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

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

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


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

この回答への補足

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

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

補足日時:2002/02/03 21:37
    • good
    • 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();">
テーブルでは
<table onmouseover="CellColorAll()" onmouseout="CellColorAlternate()">

外部ファイルでは
function CellColorAlternate(){
var cell = document.getElementsByTagName("tr");
for (i = 0; i < cell.length; i++) {
if(!(i%2)){
cell[i].style.backgroundColor = "#CCFFCC";
} else {
cell[i].style.backgroundColor = "#FFCCCC";
}
}
}
function CellColorAll(obj){
var cell = document.getElementsByTagName("tr");
for (i = 0; i < cell.length; i++) {
if(!(i%2)){
cell[i].style.backgroundColor = "#FFCCCC";
} else {
cell[i].style.backgroundColor = "#CCFFCC";
}
}
}
このようにするとカーソルを合わせた時にすべての行が入れ子にはなるのですが、上記の外部ファイルに付け加えるような形でこれをマウスを合わせた部分だけ変更するにはどのようにしたらよろしいのでしょうか?

現在、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("1つのみ選択して実行してください。");
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;
}

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

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

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

以下HTMLとjsです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/ht...続きを読む

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"><!--
function ch(Color) {
ta = document.getElementById("Table");
tb = ta.getElementsByTagName("td");

ta.style.borderColor = Color;
for(i=0;i<tb.length;i++) {
tb[i].style.borderColor = Color;
}
}
//--></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></td>
</tr>
</table>
<input type="button" value="blue" onclick="ch('blue')">
<input type="button" value="red" onclick="ch('red')">
<input type="button" value="lawngreen" onclick="ch('#7CFC00')">
<input type="button" value="yellow" onclick="ch('#FFFF00')">

こんにちは

こんな感じ?


<script type="text/javascript"><!--
function ch(Color) {
ta = document.getElementById("Table");
tb = ta.getElementsByTagName("td");

ta.style.borderColor = Color;
for(i=0;i<tb.length;i++) {
tb[i].style.borderColor = Color;
}
}
//--></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>&...続きを読む

Qよく分からないのですが、Java Scriptが発動(?)しません。

Java Scriptの効果が無効になった?ようです。
どうすれば直るでしょうか?

Aベストアンサー

IEならば・・・「ツール」→「インターネットオプション」→セキュリティタブ→「レベルのカスタマイズ」→カスタム設定のリセットを中にして「リセット」→セキュリティレベルを変更しますかで「はい」。


人気Q&Aランキング

おすすめ情報