JavaScriptでテーブルの列を非表示にする方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptのコードを使用して、テーブルの特定の列を非表示にする方法について教えてください。
  • テーブルを作成し、特定の列を隠すボタンをクリックした場合に、他の列を表示させる方法を知りたいです。
  • テーブルの幅は変更せずに、特定の列以外の列を表示する方法を教えてください。
回答を見る
  • ベストアンサー

javascript 列を非表示にしたい

このようなテーブルを作成して「C1」の「列を隠す」をクリックした時に「C1」以外のAとB列のみ表示させたいのですが、教えていただけないでしょうか。なお、表の幅は変えないままで表現したいと思ってます。 <table border="0"> <tr> <td width="48">A1</td> <td width="48">B1</td> <td width="48">C1</td> </tr> <tr> <td>列を隠す</td> <td>列を隠す</td> <td>列を隠す</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> </table>

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

  • ベストアンサー
  • notnot
  • ベストアンサー率47% (4848/10262)
回答No.1

対象のtableにid="tbl1"とか付けておいて、３列目を隠すボタンには <button onclick="hide(2)"> として、スクリプトとしては、こんな感じで。 function hide(n){ var tbl=document.getElementById("tbl1"); var trs=tbl.getElementsByTagName("tr"); for(var i=0; i<trs.length; ++i){ var tds=trs[i].getElementsByTagName("td"); tds[n].style.display = "none"; }}

ssynt3332
質問者

お礼

ありがとうございました。すごく参考になりましたし、雰囲気がでてきました。 多少アレンジしながらもう少し事を進めてみたいと思。 コメントに感謝します。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • テーブル列の表示・非表示機能の追加

    <table border="0" id="tbl1"> <tr> <th>A1</td> <th>B1</td> <th colspan="2">C1</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr> </table> というテーブルで、C1列（要はデータcccとdddの2列）を表示／非表示を行いたいです。 調べてみたところ、colspanが設定されている例がありませんでした。 お判りになる方、よろしくお願いします。

  • テーブル列の表示／非表示機能の追加～その２

    やりたい事は、AAAの列だけ常に表示させておき、BBB（つまり3列分）を表示／非表示になる・・といった事です。 下のHTMLで、変数bbbには「３」が入っているのは確認できましたが、後がさっぱり続きません。 どうぞよろしくお願いいたします。 <html> <head> <script type="text/javascript"> <!-- function hide(idName) { var aaa = document.getElementById(idName).childNodes; var bbb = aaa[0].length; alert(bbb); //--> </script> </head> <body> <button onClick="hide('list1')">隠す</button> <table border="1" cellpadding="2" cellspacing="1"> <tr> <th rowspan="3">AAA</th> <th colspan="3" id="list1">BBB</th> </tr> <tr> <th width="120">BBB1</th> <th width="120">BBB2</th> <th width="120">BBB3</th> </tr> <tr> <th>BBB11</th> <th>BBB21</th> <th>BBB31</th> </tr> <tr> <td>aaa</td> <td>aaa1</td> <td>aaa2</td> <td>aaa3</td> </tr> <tr> <td>bbb</td> <td>bbb1</td> <td>bbb2</td> <td>bbb3</td> </tr> <tr> <td>ccc</td> <td>ccc1</td> <td>ccc2</td> <td>ccc3</td> </tr> </table> </body> </html>

  • HTMLのレイアウト

    HTMLのテーブルである列だけ伸縮を自由にしたいです。 ほかの列は画面を延ばしても固定で動かない状態です。 イメージ的には以下のように２番目の列だけ幅を動かしたいのです。 <table> <tr> <td height="100%" width="200">aaa </td> <td height="100%" width="100%">bbb </td> <td height="100%" width="100">ccc </td> </tr> </table> 何か方法はないでしょうか。

    • ベストアンサー
    • HTML
  • cssで列の幅を調整するには？

    たとえば、 <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、 どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。 指定した列のみのcssで幅を調整する方法を教えてください。 できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。

    • ベストアンサー
    • HTML
  • クリックするとテーブルの列の背景色が変わる／元に戻る

    このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる という動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。 現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript"> <!-- function bgcolor(idName){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = "#EE3300"; } } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30">&nbsp;</TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>

  • JavaScriptでテーブルの内容を抽出

    JavaScriptを使いIEで動かしたいです。 IEのHTMLファイルに一つのテーブルが有ります。 そのテーブルの1列目のみをコンボボックスに抽出させることはできるでしょうか？ きっかけのイベントはなんでも構いません。又、テーブルは何の変哲もない下記のようなテーブルです。 <TABLE BORDER=1> <TR> <TD>A</TD><TD>123</TD><TD>123</TD> </TR> <TR> <TD>B</TD><TD>123</TD><TD>123</TD> </TR> <TR> <TD>C</TD><TD>123</TD><TD>123</TD> </TR> </TABLE> 上記の例ではA,B,Cをコンボに出したいのです。 お知恵をお貸しください。

  • テーブルの線の幅を一重の線にしたい

    <HTML DIR=LTR> <HEAD> </HEAD> <BODY> <TABLE border=1 bordercolor="#808080"> <TR> <TH>タイトル</TH> </TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR></TABLE> </BODY> </HTML> これにすると画像のように線の幅が二重線になってしまうのですが、 一重にするにはどうすればいいですか？ <TABLE border=1 を<TABLE border=0にすると、線が消えてしまいます。

    • ベストアンサー
    • HTML
  • 一気に「テーブルの2列目のtdタグを右詰にする

    <html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。

    • ベストアンサー
    • HTML
  • borderとcellspacingの違い

    <table border=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table cellspacing=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table cellspacing=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 cellspacing=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 cellspacing=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> いろいろサンプルを作ってみたのですが、 結局borderとcellspacingは、どう違うのでしょうか？

    • ベストアンサー
    • HTML
  • TABLEタグの幅指定

    テーブルの幅を厳密に指定したいのですが、 例えば以下のような１行２列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか？ よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する