ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

┌───┬───┐
│1行目 │     │
├───┤     │
│2行目 │ボタン │
├───┤     │
│3行目 │     │
└───┴───┘

というテーブルで、ボタンを押すごとに2行目が表示、非表示と切り替わるように、下のようなソースを書きました。
IE以外ではうまく行くのですが、IEだと
一回目の押下ではうまく行くのですが、その後が動きません。

ちなみに
最初の押下でエラーの警告がでています。
innerHTMLの記述を消したらそれは無くなりました、、、。


IE以外のブラウザでは上手く行くのですが、
IEではどこがダメなのでしょうか。




基本的なことで申し訳ありませんが、よろしくお願いします。


--------------------------------------------------------------
<script type="text/javascript">
function del() {
document.getElementById('row2').style.display="none";
document.getElementById('row1').innerHTML=
'<td>1行目</td>'+
'<td rowspan="2"><input type="button" value="2行目を表示" onclick="add()" /></td>'
}
function add() {
userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
document.getElementById('row2').style.display="display";
}
else {
document.getElementById('row2').style.display="table-row";
}
document.getElementById('row1').innerHTML=
'<td>1行目</td>'+
'<td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td>'
}
</script>

<style type="text/css">
table {
border-collapse:collapse;
}
td {
border:1px solid #ccc;
}
</style>

<table>
<tr id="row1">
<td>1行目</td>
<td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td>
</tr>
<tr id="row2">
<td>2行目</td>
</tr>
<tr>
<td>3行目</td>
</tr>
</table>

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

A 回答 (2件)

IE (少なくとも IE8-) の innerHTML は "table, tFoot, tHead, and tr elements" の書き換えに対応していません。


これらの要素を書き換える際には innerHTML 以外の手段を用いてください。
http://msdn.microsoft.com/en-us/library/ms533897 …

この仕様(不具合?)が IE9 で解消されたかどうかはわかりませんが、少なくとも IE8 では未修正です。
    • good
    • 0
この回答へのお礼

ありがとうございます。

そうだったんですか。IEでは対応していないんですね。少なくとも8以前では。
そうと分かれば別の方法でやりたいと思います。

お礼日時:2011/04/25 10:08

IEでは、TABLE、TR、TDなんかのinnerHTMLは読み取り専用なのです。


今回の場合は、ボタンを2種類用意して
都度表示・非表示すればよいかと。

この回答への補足

先にお答えくださった方をベストアンサーにしましたが、どちらも参考になりました!
ありがとうございます。

補足日時:2011/04/25 10:10
    • good
    • 0
この回答へのお礼

ありがとうございます。

あらま、IEではだめだったんですか。
別の方法でやるしかないですね。

お礼日時:2011/04/25 10:09

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

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

QIE11 javascriptについて

すみません、IE11なってから、以下のjavascriptが動かなくなりました。
画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。

全部のロジックを書いてしまいましたが、
何処がIE11から変更されたかが解らなくて、困っている所です。
何処を直すのか、全部聞くのもあつかましいと思いました、
どのあたりを見直しすれば宜しいですか。
教えて頂ければ幸いです。



<SCRIPT language="JavaScript">
<!--
var img = new Array();
img[0] = new Image(); img[0].src = "img/4031.jpg";
img[1] = new Image(); img[1].src = "img/4032.jpg";
img[2] = new Image(); img[2].src = "img/4031.jpg";
img[3] = new Image(); img[3].src = "img/4032.jpg";
img[4] = new Image(); img[4].src = "img/4031.jpg";

imgMaxSizeW = 171;
imgMaxSizeH = 141;
alphaTimer = 10;
stopTimer = 2000;
nextImgTimer = 1000;

_dom=(document.all?3:(document.getElementById?1:(document.layers?2:0)));

function getWindowSize() {
if(_dom == 1 || _dom == 2) {
win_width = self.innerWidth;
win_height = self.innerHeight;
}
if (_dom == 3) {
win_width = document.body.clientWidth;
win_height = document.body.clientHeight;
}
}

function showLayer(layerName){
if (_dom == 1) document.getElementById(layerName).style.visibility = "visible";
if (_dom == 2) document.layers[layerName].visibility = "show";
if (_dom == 3) document.all(layerName).style.visibility = "visible";
}

function hideLayer(layerName){
if (_dom == 1) document.getElementById(layerName).style.visibility = "hidden";
if (_dom == 2) document.layers[layerName].visibility = "hide";
if (_dom == 3) document.all(layerName).style.visibility = "hidden";
}

function writeHTML(layerName,html) {
if (_dom == 1) {
var div = document.getElementById(layerName);
while(div.hasChildNodes()) div.removeChild(div.lastChild);
var range=document.createRange();
range.selectNodeContents(div);
range.collapse(true);
var cf=range.createContextualFragment(html);
div.appendChild(cf);
}
if (_dom == 2) {
var div = document.layers[layerName];
div.document.open();
div.document.write(html);
div.document.close();
}
if (_dom == 3) document.all(layerName).innerHTML = html;
}

function moveLayerTo(layerName, x, y){
if (_dom == 1) {
document.getElementById(layerName).style.left = x + scrollX;
document.getElementById(layerName).style.top = y + scrollY;
}
if (_dom == 2) {
document.layers[layerName].left = x + pageXOffset;
document.layers[layerName].top = y + pageYOffset;
}
if (_dom == 3) {
document.all(layerName).style.pixelLeft = x + document.body.scrollLeft
document.all(layerName).style.pixelTop = y + document.body.scrollTop;
}
}

function changeAlpha(layerName) {
if (_dom == 3) {
if (alphaCount < 200) {
alphaCount += 2; op = alphaCount > 100 ? 100 - (alphaCount-100) : alphaCount;
document.all(layerName).filters["alpha"].opacity = op;
if (op == 100) {
tim = setTimeout("changeAlpha('"+layerName+"')", stopTimer);
} else {
tim = setTimeout("changeAlpha('"+layerName+"')", alphaTimer);
}
} else {
hideLayer(layerName);
clearTimeout(tim);
tim = setTimeout("setAlphaImgPos()",nextImgTimer);
}
} else {
setTimeout("setAlphaImgPos()",nextImgTimer*2);
}
}

var imgCount = 0;
function setAlphaImgPos() {
writeHTML("imgLay",'<IMG src="' + img[imgCount].src + '" border="0">');
imgCount++; if (imgCount >= img.length) imgCount = 0;
getWindowSize();
sX = Math.floor(Math.random()*(win_width-imgMaxSizeW-10));
sY = Math.floor(Math.random()*(win_height-imgMaxSizeH-10));
moveLayerTo("imgLay",sX,sY);
showLayer("imgLay");
alphaCount = 0;
changeAlpha("imgLay");
}

window.onload = setAlphaImgPos;

// -->
</SCRIPT>

すみません、IE11なってから、以下のjavascriptが動かなくなりました。
画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。

全部のロジックを書いてしまいましたが、
何処がIE11から変更されたかが解らなくて、困っている所です。
何処を直すのか、全部聞くのもあつかましいと思いました、
どのあたりを見直しすれば宜しいですか。
教えて頂ければ幸いです。



<SCRIPT language="JavaScript">
<!--
var img = new Array();
img[0] = new Image(); img[0].src = "img/4031.jpg";
im...続きを読む

Aベストアンサー

他の HTML がわからないので適当に付け加えて開発者ツールで確認してみたのですが、moveLayerTo() の
if (_dom == 1) {
 document.getElementById(layerName).style.left = x + scrollX;
 document.getElementById(layerName).style.top = y + scrollY;
}
で scrollX は定義されていません と表示されます。というか、F12 を押すと開発者ツールが使えるので何らかの問題が起きたならこれで確認しましょう。

あと、透過度の設定を DX フィルターを使って行っているようですが、それも IE10 から使えなくなっています。
https://msdn.microsoft.com/ja-jp/library/ie/hh801215(v=vs.85).aspx
IE10 以降ではかわりに CSS の opacity を使ってください。
https://developer.mozilla.org/ja/docs/Web/CSS/opacity

他の HTML がわからないので適当に付け加えて開発者ツールで確認してみたのですが、moveLayerTo() の
if (_dom == 1) {
 document.getElementById(layerName).style.left = x + scrollX;
 document.getElementById(layerName).style.top = y + scrollY;
}
で scrollX は定義されていません と表示されます。というか、F12 を押すと開発者ツールが使えるので何らかの問題が起きたならこれで確認しましょう。

あと、透過度の設定を DX フィルターを使って行っているようですが、それも IE10 から使えなくなってい...続きを読む

QinnerHTMLが動作しない。

JavaScriptをHTMLファイルに記述した場合、最初にfunctionスコープ内の動作以外は全て行なわれますよね。例えば、

<script type="text/javascript">
<!--
alert("test");
//-->
</script>

と書いた場合、ページの表示と同時にアラートが出ます。しかし上のalertの部分をdocument.getElementById("test").innerHTML = "test";にすると、これが実行されないのです。もちろん<div id="test"></div>タグはちゃんとbodyタグ内に記述してあります。functionを定義してbody onLoadで呼び出す方法もありますが、できればfunctionをむやみに使いたくないので、先のalertの時のように動作させたいのです。

これが動作しない原因は何なのでしょうか?

Aベストアンサー

>できればfunctionをむやみに使いたくない
ってどんな主張かしりませんが、つまらないポリシーのために
本来やるべきことを避けているのでは本末転倒ですね。
functionをつかわないなら、bodyの一番最後に
scriptをかくことになりますのでひじょーにかっちょわるいです。

前出の回答のほかではよくつかうのはonloadで呼び出す。

<html>
<head>
<script>
window.onload=function(){
document.getElementById("test").innerHTML = "test";
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

Q3つの表の外部結合

表A、B、Cの3つがあり、Aのすべての行を出力したいと考えています。
外部結合を用いるのだとは思うのですが、3つの表に対して行う場合の
書き方がわからず困っています。
ご教授いただけないでしょうか?
select * from a,b,c
where a.商品ID =b.商品ID (+) and b.商品ID (+) =c.商品ID (+)
としてみましたが、うまくいきませんでした。

Aベストアンサー

ansi構文の趣旨からいえば、結合条件と絞り込み条件は分けて書くので・・

select *
from a
left join b on (a.商品ID =b.商品ID)
left join c on (b.商品ID =c.商品ID)
where a.年月 = 任意の値

と書くのが一般的でしょうね。

Qtbody要素のinnerHTMLが書き換えられません

こんにちは、教えてください。
<form1>
<table id="test">
<tbod>
<tr><td></td><tr>
</tbody>
</table>
</form1>

例えばうえのような感じになっていたとき、

var tbody = document.getElementById( "test" ).getElementsByTagName( "tbody").item( 0 );

これでtbody要素が取得できると思います。

tbody.innerHTML += tbody.innerHTML;

だけどうのようにすると【htmlfile:未知の実行時エラーです】となります。

document.getElementById( "test" ).innertHTML += document.getElementById( "test" ).innertHTML;

という感じは一応動きます。なんででしょうか?

Aベストアンサー

innerHTMLでは読み込み専用となっている要素があります。
(今回はTRを書き換えようとしているのがひっかかっている)
+= は元はそのままに書き足しなので通るのでしょう。

http://support.microsoft.com/kb/239832/ja
サポートの回答にもありますがDOMを使うようにするしかないでしょう。

QinnerHTML内では改行は禁止?

基本的なことかもしれませんが、JavaScript初心者なので質問させてください。
innerHTML内で改行を入れると実行されないのでしょうか?

たとえば、これ↓はうまく行くのですが、


<script type="text/javascript">
function change1() {
document.getElementById('change1').innerHTML='<p>ハケには毛が多い</p><p>ハゲには毛がない</p><input type="button" value="失礼しました m(_ _)m" />'
}
</script>

<div id="change1">
<p>カラスは黒い</p>
<p>ガラスは透明</p>
<input type="button" value="ここを押すと文章が変わります" onClick="change1();">
</div>


こうすると↓うまく行きません。


<script type="text/javascript">
function change2() {
document.getElementById('change2').innerHTML='
<p>ハケにはやはり毛が多い</p>
<p>ハゲにはやはり毛がない</p>
<input type="button" value="再び失礼しました m(_ _)m" />'
}
</script>

<div id="change2">
<p>カラスは黒い</p>
<p>ガラスは透明、、、じゃないものもある</p>
<input type="button" value="ここを押すと文章が変わります?" onClick="change2();">
</div>

別に困っているわけではないのですが、
ソースは見やすく書きたいのでよろしくお願いします。

基本的なことかもしれませんが、JavaScript初心者なので質問させてください。
innerHTML内で改行を入れると実行されないのでしょうか?

たとえば、これ↓はうまく行くのですが、


<script type="text/javascript">
function change1() {
document.getElementById('change1').innerHTML='<p>ハケには毛が多い</p><p>ハゲには毛がない</p><input type="button" value="失礼しました m(_ _)m" />'
}
</script>

<div id="change1">
<p>カラスは黒い</p>
<p>ガラスは透明</p>
<input type="button" value="ここを押す...続きを読む

Aベストアンサー

JavaScriptでは、1つのコードの途中に改行を入れるとエラーになってしまいます。
なので、指定した文字列などを分割したい場合は、それぞれを+で繋げて分割すればOKです。


<script type="text/javascript">
function change2() {
document.getElementById('change2').innerHTML=
'<p>ハケにはやはり毛が多い</p>' +
'<p>ハゲにはやはり毛がない</p>' +
'<input type="button" value="再び失礼しました m(_ _)m" />'
}
</script>

ご参考まで。

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む


人気Q&Aランキング