テーブルで複数行をまとめて非表示にしたいです

質問

よろしくお願い致します。
以下の記述でエラーが出てしまいます。
見よう見まねで書いているので、根本的に間違っているのでしょうか・・・。

function open_close_hide(){
　var row = document.getElementsByClass('hide');
　if (row.style.display == 'none') {
　　row.style.display = '';
　　} else {
　　row.style.display = 'none';
　　}
　}

テーブルの非表示にしたい行は<tr class = "hide">としています。

クリックする部分は
<a href=\"javascript:void(0):\" onClick=\"open_close_rowhide();return false;\">表示/非表示</a>
としています

document.getElementByIDで一行ごとに非表示にするのには成功したのですが、
classで複数行を同時非表示にすることが出来ません。
getElementsByClassNameでも駄目でした。
詳しい方がおられましたら、よろしくお願い致します。

回答No.3

yambejp · ベストアンサー

こんな感じでどう？

<style>
tr.hide{display:none;}
tr.display{display:table-row !important;}
</style>
<!--[if IE]>
<style>
tr.display{display:block !important;}
</style>
<![endif]-->
<script>
function open_close_rowhide(obj){
var v=obj.innerHTML;
var tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
var cn=tr[i].className;
if(cn.match(/(^| )hide(?= |$)/)){
if(cn.match(/(^| )display(?= |$)/) && v=="非表示"){
cn=cn.replace(/(^| )display(?= |$)/,'');
}else if(!cn.match(/(^| )display(?= |$)/) && v=="表示"){
cn+=" display";
}
tr[i].className=cn;
}
}
obj.innerHTML=v=="表示"?"非表示":"表示";
return false;
}
</script>
<a href="#" onClick="return open_close_rowhide(this);">表示</a>
<table border>
<tr><th>test</th></tr>
<tr><td>1</td></tr>
<tr class="hide"><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr class="hide display"><td>5</td></tr>
<tr class="hide display aaa"><td>6</td></tr>
</table>

お礼

回答ありがとうございます。
まさにやりたかった挙動を完璧にしてくれました。
書きませんでしたが、最初は非表示にしておきたかったので、その点でも完璧です。
PHPからの出力でしたが、それも問題ありませんでした。
しかし、何回読んでもコードの意味が難しくて分からない・・・これを機にもっと勉強したいと思います。
どうもありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

getElementsByClassNameを使用し、ループ処理で１つずつセットしてください。

お礼

回答ありがとうございます。
やっぱりループ処理を使わないとダメですか。
もっと勉強します。
ありがとうございました。

回答No.1

kosukejlampnet

リファレンスをしっかり読みましょう。
getElementsByClassなんてものは定義されていません。

参考URL：

http://www.openspc2.org/JavaScript/JavaScript_DOM/index.html

お礼

回答ありがとうございます。
そもそも定義されていなかったのですか・・・。
もっと勉強します、ありがとうございました。