document.getElementByIdがIE8だけ動かない

前へ 次へ
このQ&Aのポイント
  • javascript初心者の質問文です。HP上で問い合わせページを作っていますが、IE8ではスクリプトが正常に動作しません。どうすれば解決できるでしょうか。
  • 質問内容に応じて表示項目を変えるスクリプトを作成していますが、IE8での動作がうまくいきません。他のブラウザでは正常に動作するのですが、IE8だけが対応できません。原因と解決策を教えてください。
  • IE8では、問い合わせページでスクリプトが動作しません。プルダウンメニューを選択しても、表示項目が変わらず、動作しない状態です。どのように修正すればよいでしょうか。
回答を見る
  • ベストアンサー

document.getElementByIdがIE8だけ動きません

javascript 初心者です。 HP上で問い合わせページを作っています。 質問の内容によって入力項目を表示/非表示させるために以下のようなスクリプトを書きました。 q-1 を選んだ時は”名前”と”質問内容”を入力，q-2 を選んだ時は”名前”，”入力１”，”質問内容”を入力するという形式です。 質問内容の選択はプルダウンメニューから行います。 IE8以外では動くのですが、IE8だけ動きません。 どうすればよいかを教えて下さい。 <head> 略 <script type="text/javascript"><!-- function checkmenu( disp ) { var a = disp ; document.getElementById('basic-info').style.display = "block"; document.getElementById('question').style.display = "block"; switch(a){ case "select_q-1" : document.getElementById('disp_q-2').style.display = "none"; break; case "select_q-2" : document.getElementById('disp_q-2').style.display = "block"; break; } } --> </script> </head> <body> <略> <select name="naiyou"> <option onclick="checkmenu('select_q-1')" value ="q-1">質問１<br> <option onclick="checkradio('select_q-2')" value ="q-2">質問２<br> <div id="basic-info" style="display:none"> <table class="aaa"> <tr> <td class="aaa" width="30%" valign="top"><b>お名前:</b></td> <td class="bbb" width="70%"><input type="text" name="name" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="disp_q-2" style="display:none"> <table class="aaa" > <tr> <td class="bbb" width="30%" valign="top"><b>入力１：</b></td> <td class="td_toumei" width="70%"><input type="text" name="nyuuryoku1" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="question" style="display:none"> <table class="aaa"> <tr> <td class="aaa" colspan="2"><b>質問内容: </b></td> </tr> <tr> <td class="bbb" valign="top" colspan="2"> <textarea name="question" cols="60"rows="10"></textarea> </td> </tr> <tr> <td class="bbb" colspan="2"> <input type="hidden" name="language" value="j"> <input type="submit" value="送信"> <input type="button" name="del" value="本文 クリア" onclick="msgclear()"> </td> </tr> </table> </div> 略 </body> 実際の質問の項目や入力内容はもう少し複雑ですが、おおまかにはこんな感じです。 プルダウンメニューで選択しても、IE8だけまったく動きません。 よろしくお願いします。

  • km340
  • お礼率78% (11/14)

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

No1です。 ＞初めに一番上のメニューを選択すると動いてくれません。 意味がいまいちちゃんと把握できないのだけれど、デフォルト表示のままという解釈をしました。 onchangeはその名の通り、内容が変更されたときに発生します。 デフォルト表示の時に動作しないという意味であるなら、そのような場合は、 1）初期の表示をデフォルト状態に合せておく 　（スクリプトを実行して合せるか、CSSなどで合せておくかなど） 2）セレクトのデフォルト表示を「---」などのどちらでもないものにしておく 　（場合によっては選択されたら、↑のオプションを消す） のような対処をすればよいのではないでしょうか？ でも、それっていままでも同じだったのでは？ （changeにする前も、わざわざマウス操作しなければ何も起こらなかったはず）

km340
質問者

お礼

＞＞初めに一番上のメニューを選択すると動いてくれません。 ＞意味がいまいちちゃんと把握できないのだけれど、デフォルト表示のままという解釈をしました。 その通りです。説明不足ですみません。 教えて頂いた方法で、どちらもできました。 いろいろな方法があるんですね。勉強不足ですね。 教えて頂いたことを、今後に活かそうと思います。 ありがとうございました。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

<select>の閉じタグがないので、ブラウザによって表示のされ方が違います。 セレクタの場合はonclickではなく、onchangeでイベントを取得するのが普通では？ （IEではクリックだとイベントが発生しないみたい）

km340
質問者

補足

ありがとうございます。 <select>の閉じタグは下記忘れで、実際には書いてありました。 おかげさまでonchangeを使ったら、IEでも動くようになりました。 ですが、初めに一番上のメニュー(ここでは”質問１”）を選択すると動いてくれません。ほかのメニュー（ここでは”質問２”）を選んだ後、”質問１”を選ぶときちんと動きます。 どうしてこのようなことになるのかが、わかれば教えて下さい。 <select name="naiyou" onchange="checkmenu( this.value )"> <option value ="q-1">質問１</option> <option value ="q-2">質問２</option> </select> よろしくお願いします。

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

関連するQ&A

  • getElementByIdではまってます・・・

    以下のソースを書いて、Firefoxで実行すると 検索ボタンをクリックするとテーブルが表示されるのですが すぐにもとに戻ってしまいます。 すいません。初心者です。 どなたかご教授ください。 言っている意味が分からなかったらすいません。 補足します。 HTMLです。 <td style="width:60px;" align="center"><input style="width:60px" type="submit" id="id" name="id" onclick="effectDetailWindow('detailWindow');" value="検索"></td> <div id="detailWindow" style="display:none;"> <table border="1" cellpadding="3" cellspacing="1" bordercolor="#000000" style="width:460px;"> <tr> <td style="width:80px;" class="table_head"> TEST1 </td> <td style="width:150px;"> <input type="text" size="25" maxlength="50" name="searchtest1" value="{$form.searchtest1}"> </td> <td style="width:80px;" class="table_head"> TEST2 </td> <td style="width:150px;"> <input type="text" size="25" maxlength="50" name="searchtest2" value="{$form.searchtest2}"> </td> </tr> </table> </div> JavaScriptです。 function effectDetailWindow(id) { var obj = document.getElementById(id); if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; } }

  • IE6とIE7のHtmlレイアウトについて

    お世話になります。 現在、XHTMLで画面を作成しています。 Htmlのレイアウトについて、非常に困った問題が発生しています。 IE6で正常に表示されるものが、IE7では崩れて表示されてしまいます。 具体的にはテーブルの中身がIE6だと、 テーブル(右寄せ(本来の形)) ---------|----------------------------- aaa |テキストフィールド１ ---------|----------------------------- bbbbb |テキストフィールド2 ---------|----------------------------- 具体的にはテーブルのｌ中身がIE7だと、 テーブル(中央揃え(ずれている状態)) ---------|----------------------------- aaa | テキストフィールド１ ---------|----------------------------- bbbbb | テキストフィールド2 ---------|----------------------------- になってしまいます。(汚くて、判りづらくてすみません！！) 以下にHTMLを記載します。 <table align="center"> <div> 　　　<tr> 　　<td> </td> </tr> </div> </table> <table border="1"> <tr id="trpattern"> <td width="200">　 　　　　　　　　　　　　<labelid="reportpatternLabel"/></td> 　　　　　　　<td width="350"> 　 <selectid="patternItems"onchange="hide(this.value);"> <option id="pattern"> </option> </select><br></br> </td> </tr> <tr id="trarea"> <td width="200"><label id="selectAreaLabel"/></td> <td width="350"> <select id="areaItems" style="width:130;" onchange="selectNsc()"> <option id="area"> </option> </select><br></br> </td> </tr> <tr id="trnsc"> <div id="nscdiv"> <td width="200"> <label id="nscselectLabel"/></td> <td width="350"> <select id="nscItems" style="width:130;" onchange="fillnscList()"> <option id="nsc"> </option> </select><br></br> </td> </div> </tr> <tr id="trperiod"> <td width="200"><label id="periodLabel"/></td> <td width="350"> <input type="text" id="periodfrom"></input> <label id="symbolLabel"></label> <input type="text" id="periodto"></input> </td> </tr> <tr id="trlevel" style="display:none"> <td width="200"><label id="levelLabel"/></td> <td width="350"> <select id="levelItems"> <option id="level"> </option> </select><br></br> </td> </tr> <tr id="trcompare" style="display:none"> <td width="200"> <label id="compareAnotherLabel"/><label id="NSCAverageLabel"/></td> <td width="350"> <input type="radio" name="nscrdb" value="Yes" label="Yes" onclick="callshow(this.value);"></input> <label> Yes</label> <input type="radio" name="nscrdb" value="No" label="No" checked="checked" onclick="callshow(this.value);"></input> <label> No</label> </td> </tr> </table> --------------------------------------------------- どの様なタグ、方法を用いれば解消されるのでしょうか？ どなたかご教授願いますでしょうか？ お願いいたします！！

    • ベストアンサー
    • HTML
  • 【ツリーメニューの保持】

    【ツリーメニューの保持】 １．フォーム内の「タイプ」のラジオボタンをどれか1つ選択すると該当のツリーメニューが表示される 2．・必要項目を入力し、form送信、POSTで受け取る。 3.・form送信後も表示されていたツリーメニューを保持 ということを実装したいと思っています。 javascriptは初心者で、ネットで調べてつくりました。 「ラジオボタン選択でツリー表示」はできましたが 「form送信後も表示されていたツリーメニューを保持」部分が実装できません。 一人ではどうしても解決できず、どなたかご教授いただけませんでしょうか？ よろしくお願い致します。 ------------------------------------------------------------------------------ 【php】 if($_REQUEST["mode"] == "regist") { var_dump($_REQUEST); } 【javascript】 //送信後もツリーメニュー保持 function check() { if (document.fm.type[0].checked == true) { document.getElementById('A').style.display = "block"; } else if(document.fm.type[1].checked == true) { document.getElementById('B').style.display = "block"; } } //ラジオボタン選択でツリーメニュー表示 function treeMenu(tName) { radio = document.getElementsByName('type') if(radio[0].checked) { document.getElementById('A').style.display = "block"; document.getElementById('B').style.display = "none"; } else if(radio[1].checked) { document.getElementById('A').style.display = "none"; document.getElementById('B').style.display = "block"; } 【form】 <form action="hogehoge.php" method="post" name="fm"> <input type="hidden" name="mode" value="regist"> <table> <tr> <td>タイプ</td> <td> <input type="radio" name="type" value="1" onClick="treeMenu('A')"> <input type="radio" name="type" value="2" onClick="treeMenu('B')"> </td> </tr> </table> <div id="A"> <table> <tr> <td>住所</td> <td><input type="text" name="address" value="<?php echo $_REQUEST[address]?>"></td> </tr> </table> </div> <div id="B"> <table> <tr> <td>電話番号</td> <td><input type="text" name="tel" value="<?php echo $_REQUEST[tel]?>"></td> </tr> </table> </div> <table> <tr> <td>年齢</td> <td><input type="text" name="age" value="<?php echo $_REQUEST[age]?>"></td> </tr> </table> <input type="submit" value="確認" onclick="check()"> </form>

  • テーブル内のチェックボックスのvalue受け渡し

    jspで、テーブルの中に用意したチェックボックスのvalueを別のプログラム（select_data_c）へ渡したいのですが、うまくいきません。alertを使って確認してみたところ、undefinedが表示されました。 また、受け側のプログラムには特に問題は無いようでした。 以下がソースの一部です。かなりの長文で申し訳ございませんが、ご教授よろしくお願いします。 <%! //コード String code_Act_App = "2"; ←アプリ実行の記述です。出力ボタンを押したらcsvを作成 %> <html> <head> <title>データ取得条件選択</title> <script type="text/javascript"> function entryChange2(){ if(document.getElementById('changeSelect')){ id = document.getElementById('changeSelect').value; if(id == 'select1'){ //フォーム document.getElementById('firstBox2').style.display = ""; document.getElementById('firstBox22').style.display = ""; document.getElementById('secondBox2').style.display = "none"; document.getElementById('secondBox22').style.display = "none"; }else if(id == 'select2'){ //フォーム document.getElementById('firstBox2').style.display = "none"; document.getElementById('firstBox22').style.display = "none"; document.getElementById('secondBox2').style.display = ""; document.getElementById('secondBox22').style.display = ""; }}} //オンロードさせ、リロード時に選択を保持 window.onload = entryChange2; function output(){ //変数に代入 var d = document.chkList.chk.value; alert(d);　　　←ここでundefinedが表示されてしまいます checkvalue = ''; //チェックボックスがONの時はその値を設定する if (document.chkList.chk.checked == true) { document.C_FUNC.chk.value = document.chkList.chk.value ; }} </script> </head> <body> <div align="center"> <h1>データ取得条件選択</h1> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th>対象マスター</th> <td> <select id="changeSelect" name="hoge" onchange="entryChange2();"> <option value="select1">マスタ選択</option> <option value="select2">社員マスター</option> </select> </td> </tr> </table> <!-- 表示非表示切り替え -->　↓２つのテーブルを横に並べて表示させています <table><tr><td> <table id="firstBox2"> <tr> <th>マスター項目一覧</th> <td><div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> 対象マスターを選択し、<br> 表示ボタンを押してください</div></td></tr> </table> </td><td valign="top"> <table id="firstBox22"> <tr> <th>関連テーブル項目一覧</th> <td valign="top"><div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> 対象マスターを選択し、<br> 表示ボタンを押してください</div></td></tr> </table> </td></tr></table> <!-- 表示非表示切り替え --> <table><tr><td> <table id="secondBox2"> <tr> <th>マスター項目一覧</th> <td><form name="chkList" method="POST" > <div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> <input type="checkbox" name="chk" value="会社コード">会社コード<br> <input type="checkbox" name="chk" value="社員番号">社員番号<br> <input type="checkbox" name="chk" value="削除フラグ">削除フラグ<br></div></form> </td></tr></table> </td><td valign="top"> <table id="secondBox22"> <tr> <th>関連テーブル項目一覧</th> <td><form name="chkList" method="POST" > <div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> ここにもマスター項目一覧と同様にチェックボックスを置いています。項目数が多いのでスクロールバーを付けています。 </div></form></td> </tr> </table> </td></tr></table> <form action = "select_data_c" name="C_FUNC" method="POST"> <input type = hidden name = "chk" value ="d"> <input type = hidden name = "C_FUNC" value = "<%= code_Act_App %>"> <input type="submit" name = "OutPut" value="上記の条件で出力" onClick="output()"> </form> </div> </body> </html>

  • 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>

  • javascriptがIEで機能しない

    ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択１"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままです どこを修正してやればいいでしょうか？ ぜひ御指南ください。

  • jsでラジオボタンによって表示内容を変えたい

    とても困っているのでお力をお貸しください。 HTML側に ==================================================== <table summary="条件問題"> <tr> <th>問題1</th> <td> <ul> <li><input type="radio" name="AAAAAA" value="あああ" id="a1" onclick="mondaiChange1();"/> <label for="a1"> あああ</label></li> <li><input type="radio" name="AAAAAA" value="いいい" id="a2" onclick="mondaiChange1();"/> <label for="a2"> いいい</label></li> <li><input type="radio" name="AAAAAA" value="ううう" id="a3" onclick="mondaiChange1();"/> <label for="a3"> ううう</label></li> <li><input type="radio" name="AAAAAA" value="えええ" id="a4" onclick="mondaiChange1();"/> <label for="a4"> えええ</label></li> <li><input type="radio" name="AAAAAA" value="おおお" id="a5" onclick="mondaiChange1();"/> <label for="a5"> おおお</label></li> </ul> </td> </tr> </table> <div class="TableA"> <table summary="問題その2" id="TableA"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> <div class="TableB"> <table summary="問題その2" id="TableB"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> ========================== と記載。 includeしているjsファイル側に ========================== function mondaiChange1(){ radio = document.getElementsByName('AAAAAA') if(radio["a1"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a2"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a3"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a4"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a5"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; } ========================== としているのですが、これだと最初にアクセスしたとき 問題その2のTableAとTableB両方のテーブルが表示されてしまいます。 （その後ラジオボタンを選択すると希望通りの動作になります。） //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; を入れたら大丈夫というのをネットで見たのですが、どう書き換えてもうまくいきません。 希望としては 最初にアクセスしたときは問題1の回答は何も選択されてない状態で、その下には何も表示されていない。 ↓ 問題1の選択肢を選択した時点で初めて「問題その2」のテーブルが選択したラジオボタンによってどちらかひとつ表示される、という風にしたいのですが、教えていただけないでしょうか？

  • このメルフォタグについて…

    <div id="main"> <BR class="clear"> <h2>Contact</h2> <div class="txt"> <table cellspacing="3" cellpadding="3" border=0> <tr> <td>NAME</td> <td><input name="name" type="text" size="30"></td> </tr> <tr> <td>MAIL</td> <td><input name="mail" type="text" size="30"></td> </tr> <tr> <td>URL</td> <td><input name="url" type="text" value="http://" size="30"></td> </tr> <tr> <td valign="top">COMMENT</td> <td><textarea name="msg" cols="30" rows="5">ご感想や管理人へのお便りはこちら☆</textarea></td> </tr> <tr> <td colspan="2" align="right"> <input type="button" name="submit" value="SUBMIT" class="b"></td> </tr> </table> </div> テンプレートをお借りしたのですが、メルフォタグがこのようになっていました。 が、このままでは使用出来ないので、どこに自分のメアドを入れればいいのか教えて下さい。

  • JavaScriptでIE上のボタンクリック

    JavaScriptの初心者でIE上で表示されたボタンをクリックしたいのですが、2つのボタンのうち1つをクリックしたいです。 「document.all("Buttonok").click();」,「document.getElementById("Buttonok").click();」と記入してみたのですが、エラーとなります。 下記のようなボタンをJavaScriptで押すにはどうしたらいいのでしょうか？ どなたかすいませんがご教授ください。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ボタンのHTML ※formで囲まれてないです。 <table border="0" cellspacing="0" cellpadding="0" width="150"> <tr> <td width="50%"> <div id="Button"> <input type="buttonok" value="OK" class="Button" onclick="onClk("1");" /> </div> <div id="Button"> <input type="buttonng" value="NG" class="Button" onclick="onClk("0");" /> </div> </td> </tr> </table>

  • IEにおけるinnerHTMLの記述ミス？

    ┌───┬───┐ │１行目 │　　 　　│ ├───┤　　　　 │ │２行目 │ボタン │ ├───┤　　　 　│ │３行目 │　　　 　│ └───┴───┘ というテーブルで、ボタンを押すごとに２行目が表示、非表示と切り替わるように、下のようなソースを書きました。 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

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する