• 締切済み

TABLEの行を非表示にした際の隙間

テーブルの行をクリックアクションにて開閉したいのですが、 開いたテーブルを閉じた際に隙間ができてしまいます。 これはIE6で発生し、FireFox3では隙間無く閉じています。 IE6でも、この隙間を無くすことは可能でしょうか？ ご教授願います。 現状のスクリプトは以下のようにしています。 （クリックするのは左上のプラス／マイナスの画像です） <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <TITLE></TITLE> </HEAD> <BODY> <script type="text/javascript"> function close_list(){ document.getElementById("img").src = '../images/plus.gif'; document.getElementById("img").onclick = new Function(" open_list(); "); document.getElementById("mark").rowSpan = '1'; document.getElementById("tr_yuubin").style.display = 'none'; document.getElementById("tr_ken").style.display = 'none'; document.getElementById("tr_stat").style.display = 'none'; return; } function open_list(){ document.getElementById("img").src = '../images/minus.gif'; document.getElementById("img").onclick = new Function(" close_list(); "); document.getElementById("mark").rowSpan = '5'; document.getElementById("tr_yuubin").style.display = ''; document.getElementById("tr_ken").style.display = ''; document.getElementById("tr_stat").style.display = ''; return; } </script> <FORM> <TABLE width="755" border="1"> <TBODY align="left"> <TR> <TD width="15" align="center" id="mark" valign="top"><img name="img" id="img" src="../images/plus.gif" onclick="open_list()"></TD> <TD width="135" >タロウ </TD> <TD width=""> <INPUT type="checkbox" id="chk" name="chk" value="1">登録 </TD> </TR> <TR id="tr_yuubin" style="display: none;"> <TD width="135">郵便</TD> <TD><input name="yuubin" type="text" id="yuubin" style="width:150px" ></TD> </TR> <TR id="tr_ken" style="display: none;"> <TD width="135">都道府県</TD> <TD> <select style="width:400px"><option> </select> </TD> </TR> <TR height="20" id="tr_stat" style="display: none;"> <TD width="135">ステータス</TD> <TD>　</TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

みんなの回答

  • atse
  • ベストアンサー率83% (36/43)
回答No.5

1.formにidをつける <FORM id="myform"> 2.close_list()の１行目で強制リフレッシュ function close_list(){ document.getElementById("myform").innerHTML = document.getElementById("myform").innerHTML; document.getElementById("img").src = '../images/plus.gif'; ：以下略 他は今まで通りで実行。

mat001
質問者

お礼

で、できましたっ！ ありがとうございます。 本当に助かりました。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

/*@cc_on ～ end@*/ って何でしょう？ これは、JScript コンパイラ オプションといって、 IEだけが解釈できるヶ所です。他のブラウザーでは/* ～ */はコメント扱いでしょ、主にIEとその他で処理を分けたい時に使います。（本来目的は違うのかなあ） http://msdn.microsoft.com/ja-jp/library/tbk43f11(VS.80).aspx に解説されてます。 ソースの視認性が悪くなるので、個人的には好きです。

mat001
質問者

お礼

なるほど、勉強になります。 ありがとうございます。

回答No.3

ごめんなさい。ぜんぜんわかりません！ へるぷ～！

mat001
質問者

補足

ありがとうございました。 引き続き、私もへるぷ～です。。

回答No.2

ごめん！まちがえた！おれがやばいひとだ！ くにくのさく！ document.getElementById("mark")./*@cc_on @if(1) rowspan @else@*/ rowSpan /*@end@*/ = '1'; document.getElementById("mark")./*@cc_on @if(1) rowspan @else@*/ rowSpan /*@end@*/ = '5'; ～.onclick = new Function(" open_list(); ") は ～.onclick = open_list; にできるよ。

mat001
質問者

補足

ありがとうございます。 試してみましたが、隙間は無くなったのですが、テーブル展開時のレイアウトが 崩れてしまいました。。 具体的には左端の列が結合されていない状態です。 勉強不足で申し訳ありませんが、/*@cc_on ～ end@*/ って何でしょう？ 初めて見ました。。

回答No.1

rowSpan = を rowspan = に、 でもほかもなぁ～

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptでの表の行の表示・非表示の切り替え

    現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。 テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "test1"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "test1"){ if(document.getElementById){ document.getElementById("test1").style.display = "none"; } } } // --> </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト１</option> <option value="test2">テスト２</option> <option value="test3">テスト３</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p>&nbsp;</p> </td> <td width="217"> <p>&nbsp;</p> </td> </tr> </table> <div id="test1" style="display:none;"> （本来はここに2行追加したい） </div> </body> </html>

  • javascriptを使い、サムネイル表示

    サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>

  • Javascript　web テーブルにカーソルを載せると、説明文を表示するプログラム

    タイトルの通りのプログラムを作ったのですが、ファイルを開いた時から説明文が表示されてしまいます。開いた時に表示されなくするには、どのようにすればよいのでしょうか？ ソースは↓になります。よろしくお願いいたします。 <html> <head> <script type="text/javascript"> <!-- function display_INIT() { document.getElementById('discript01').style.display='none'; } function display_ON(itm) { if(itm == 1) { document.getElementById('discript01').style.display='block'; } } function display_OFF(itm) { if(itm == 1) { document.getElementById('discript01').style.display='none'; } } // --> </script> </head> <table> <tr onmouseover="display_ON(1)" onmouseout="display_OFF(1)"> <td width="16%" align="center" bgcolor="EBEBEB" nowrap>test </td> <td width="16%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> </tr> <tr id="discript01"> <td colspan="6">（只今テスト中） </td> </tr> </table> </html>

  • 要素の表示/非表示の実験

    をしてみました。 <input type="button" onclick="f()" value="push"/> <input type="button" onclick="g()" value="push"/> <table> <tr><td>a</td><td>b</td><td>c</td></tr> <tr id="x"><td>x</td><td>y</td><td>z</td></tr> <tr><td>u</td><td>v</td><td>w</td></tr> <tr id="y"><td>x</td><td>y</td><td>z</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> </table> <script> function f() { var x=document.getElementById('x').style.visibility; if(x=='hidden') document.getElementById('x').style.visibility='visible'; else document.getElementById('x').style.visibility='hidden'; } function g() { var x=document.getElementById('y').style.display; if(y!='none') document.getElementById('y').style.display='none'; else document.getElementById('y').style.display='block'; } </script> です。 最初のボタンは単に表示するかどうかだけで位置は消えた場所に詰められません。 次のボタンは消えるとその場所に他の要素が詰められます。しかし消えたものは次にボタンを押しても消えたままです。 消えた場所に要素が詰められしかも再表示できるようにするにはどうしたらいいのでしょうか?

  • JSでページ内の表示を変えた時の問題について

    どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 Javascriptを利用して、プルダウンメニューの選択肢を選んで ページ内の表示を変更したときの問題なのですが、 選択後submitボタンで次のページに移動しブラウザの戻るボタンで前ページに戻ると プルダウンメニューにはさきほど選択したものが残っているのですが、 変更したはずの表示部分が元に戻ってしまいます。 FireFoxで確認した場合、この症状はみられませんでした。 IEの仕様なのでしょうか？ どなたか解決方法が分かりましたらご教授お願い致します。 【ソース】 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" Content="text/Javascript"> <title>テスト</title> <script type="text/javascript"> <!-- //表示変更 function showthis(obj) { if(!obj) return false; if(document.getElementById) { for( i=0; i<=5; i++ ){ document.getElementById( "1_"+ i ).style.display = "none"; document.getElementById(obj).style.display = "block"; } } else { return false; } } --> </script> </head> <body> <form name="one" action="./two.html" method="POST"> <table class="box2"> <tr class="tr1"> <td class="pdown"> <select name="q1" onChange="showthis(this.value)"> <option value="1_0" selected>----　選んでください　----</option> <option value="1_1">　１ － いち</option> <option value="1_2">　２ － に－</option> <option value="1_3">　３ － さん</option> <option value="1_4">　４ － よん</option> <option value="1_5">　５ － ご</option> </select> </td> </tr> </table> <div id="youso"> <table class="box1"> <tr> <td> <div id="q1"> <div id="1_0"> <p>【----　選んでください　----】</p> </div> <div id="1_1" style="display: none;"> <p>【１ － いち】</p> </div> <div id="1_2" style="display: none;"> <p>【２ － に－】</p> </div> <div id="1_3" style="display: none;"> <p>【３ － さん】</p> </div> <div id="1_4" style="display: none;"> <p>【４ － よん】</p> </div> <div id="1_5" style="display: none;"> <p>【５ － ご】</p> </div> </div> </td> </tr> </table> </div> <input type="submit" name="" value="次へ進む"> </form> </body> </html>

  • テーブル内に隙間が。

    テーブル内に隙間が。 質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。 これを無くすにはどうすればいいのでしょうか。 （html/cssの書き直さなくてはならない箇所はどこでしょうか） 高さは左右のセルとも300に合わせているのですが…。 どなたかご教授願います。 <!--ソース --> <style TYPE="text/css"> <!-- td { margin: 0; padding: 0px; } .content_title { display: block; position: relative; padding-left: 0px; width: 100%; height: 40px; color: #ffffff; background-color: #000000;} .content_cell { position: relative; padding-bottom: 0px; width: 100%; height: 260px; padding: 0; } .menu_link { display: block; position: relative; width: 100%; height: 30px; padding-top: 12px; text-align: center; font-size: 11pt; color: #f5f5f5; background-color: #000000; } --> </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> <!-- no contents -->no content </td></tr> </table>

  • Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます

    はじめて投稿します。 下のHTMLを表示したとき、menuの部分が狭くなった上に画面自体のスクロールバーが出て横に広がってしまいます。 赤色のテーブルをウィンドウいっぱいに広げた状態で、オレンジ色のテーブルを囲むDIVタグを赤色のテーブルの80%にしたいのです。 オレンジ色テーブルのwidthの80%になっているとか？ でも、オレンジ色のテーブルのwidthがウィンドウに収まるような値なら、意図する表示になるのですが・・・。 どう直したらいいのでしょうか。 <html> <script> function hoge(){ document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight + ",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight + ",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight + ",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight + ",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight; } </script> <body onload="hoge()"> <span id="s1"></span> <table width="100%" height="95%" border="1" style="background-color:red;" id="t1"> <tr> <td valign="top" width="200px">menu</td> <td valign="top"> <div style="background-color:yellow" id="d1"> <table border="1" style="background-color:blue" width="90%" height="100%" id="t2"> <tr><td>hoge1</td></tr> <tr><td>hoge2</td></tr> <tr> <td> <div style="background-color:pink;overflow:auto;height:80%;width:80%" id="d2"> <table id="t3" width="3250" height="500" style="background-color:orange"> <tr> <td>hoge3</td> </tr> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </body> </html>

  • クリックして画像を表示JavaScriptについて

    友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。

  • 表示すると文字化けします

    下記のファイルが表示されると文字化けしてエンコードを修正しないとみれませんなぜでしょうか？ 日本語EUCになってしまします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD bgcolor="#ffff00" width="699"><B><FONT size="+2">登録ありがとうございました</FONT></B></TD> </TR> <TR> <TD height="99" width="699"><B>■<A href="http*************************">使いこなすために</A>手順に沿って進んでください</B>→<A href="http**************************">次へ進む</A></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • tableの分割画像　隙間について

    いつもお世話になります。 助かります。 さてテーブル内画像分割についてお尋ねいたします。 画像分割をいたしたく、４分割にphotoshopでスライスいたしました。 確認画面では奇麗に表示されますが作業のサイトに収めるとcenterに 縦に１ピクセルのぐらいのラインの隙間が入ります。 サイト内の記述は.... 例えばこんな感じにしています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <linkrel="stylesheet"type="text/css"href="css/xx.css" /> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/sxxx.css"> <link rel="stylesheet" type="text/css" href="css/xxxxx.css" > <link rel="stylesheet" type="text/css"href="css/xxxxxxx.css" > <SCRIPT LANGUAGE="JavaScript"> <!-- function subwin1(){ window.open("shop01.html", "01"," width=600px,height=700px,scrollbars=yes"); scrollbars=yes} function subwin2(){ window.open("shop02.html", "01"," width=600px,height=700px,scrollbars=yes"); scrollbars=yes} --> </SCRIPT> <style type="text/css"> <!-- * { font-family: Verdana, Helvetica; font-size: 10pt; margin:0; padding:0; } h2.s{ margin:0; padding:0; font-size:13px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-weight:100; line-height: normal; color: #999999; } .style6 {font-size: 10px} .style7 {font-size: xx-small} .style8 {color: #376BA0} table { width:100%; height:auto; padding:0; margin:0; } --> </style> </hade> <body>....................]........... ........省略......... <div id="photo"> <table border=0 cellspacing=0 cellpadding=0 > <tr> <td><img src="../13.jpg" width="263" height="114" alt""></td> <td><img src="../10.jpg" width="292" height="114"/></td> </tr> <tr> <td><img src="../11.jpg" width="263" height="91"/></td> <td><img src="../12.jpg" width="292" height="91"/></td> </tr> </table> </div> <!----- photo ead-----> です。 他のものと競合するのでしょうか？ どうしてこうなるのでしょうか？ 隙間をとり前に進みたいのですが教えて頂けませんか？ お願いいたします。 表現　伝え方に誤りがありますればご容赦くださいね。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する