WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:<table>のある列の"中身"を消す方法

0:[投稿] uvn [2004/03/14 12:00 ][環境:IE6 ]

以下のようなテーブルの列2の中身だけを消すにはどのようにすればいいのでしょうか?(JavaScriptで中身の表示/非表示を切り替える)

<table border="1">
    <tr><th>列1</th><th>列2</th></tr>
    <tr><td>AAAA</td><td>BBBB</td></tr>
    <tr><td>AAAA</td><td>BBBB</td></tr>
</table>

その列自体を消す場合にはその列の<col>にdisplay:noneを付けると出来ますが、
中身を消すにはどのようにしたらいいのでしょうか?
<col>のstyleにclip:rect(0,0,0,0)としても消えないですし、font-size:0px;と
やっても中身は消えません。
何か良い方法は無いでしょうか?


1:[回答] 悩める学生 [2004/03/14 17:03 ]

これで希望どおりかわかりませんが作ってみました。
<html>
<head>
<script>
function taChange(){
    for(i=0;i<document.all("aa").length;i++){    
        document.all("aa").item(i).innerText=" ";
    }
}
</script>
</head>
<body>
<table width="100%" border=1 cellspacing=0>
<tr><td width="50%">列1</td><td id="aa">列2</td></tr>
<tr><td>aa</td><td id=aa>cc</td></tr>
<tr><td>bb</td><td id=aa>dd</td></tr>
</table>
<input type="button" value="change" onclick="taChange()">
</body>
</html>
しかしこの方法では列すべてにidをつけなければいけないので
あまりかっこいい方法じゃないかもしれません。


2:[回答] 悩める学生 [2004/03/14 17:24 ]

あ、すいません。表示の切り替えでしたね。
上のではだめなので出直してきます。


3:[回答] 悩める学生 [2004/03/14 17:51 ]

<html>
<head>
</head>
<body>
<table width="100%" border=1 cellspacing=0>
<tr><td width="50%">列1</td><td id="aa">列2</td></tr>
<tr><td>aa</td><td id=aa>cc</td></tr>
<tr><td>bb</td><td id=aa>dd</td></tr>
</table>
<input type="button" value="非表示" onclick="taChange()">
<input type="button" value="表示" onclick="baChange()">
<script type="text/javascript"><!--
val=new Array(document.all("aa").length);
function taChange(){
    for(i=0;i<document.all("aa").length;i++){    
        val[i]=document.all("aa").item(i).innerText;
        document.all("aa").item(i).innerText=" ";
    }
}
function baChange(){
    for(i=0;i<document.all("aa").length;i++){    
        document.all("aa").item(i).innerText=val[i];
    }
}
//-->
</script>
</body>
</html>
三回連続レスはさすがにうざいですね。これで最後にします


4:[回答] uvn [2004/03/14 19:02 ]

有り難うございます。
わざわざ作って頂いて恐縮なのですが、idは重複が"通常は"許されない
のでこのような書き方はちょっとキビシイのです...。


5:[回答] … [2004/03/14 22:41 ]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <title>ある列の"中身"を表示/非表示</title>
 <style type="text/css">
 table {
   border: solid 1px black;
   border-collapse: collapse;
 }
 th, td {
   border: solid 1px black;
   padding: .3em;
 }
 </style>
 <script type="text/javascript">
 function show_hideCol(btn)
 {
   var rows = document.getElementsByTagName('table')[0].rows;
   for (var i = 0; i < rows.length; i++)
   {
     rows[i].cells[1].style.visibility =
       (btn.value == '隠す' ? 'hidden' : 'visible');
   }
   btn.value = (btn.value == '隠す' ? '表示' : '隠す');
 }
 </script>
</head>
<body>
<p><input type="button" value="隠す" onclick="show_hideCol(this)"></p>
<table border="1">
 <tr><th>列1</th><th>列2</th></tr>
 <tr><td>AAAA</td><td>BBBB</td></tr>
 <tr><td>AAAA</td><td>BBBB</td></tr>
</table>
</body>
</html>


6:[完了] uvn [2004/03/14 23:07 ]

有り難うございます。そういう方法があるのですね。
理想どおりに出来ました。ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World