アプリ版:「スタンプのみでお礼する」機能のリリースについて

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

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でも駄目でした。
詳しい方がおられましたら、よろしくお願い致します。

A 回答 (3件)

こんな感じでどう?



<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>
    • good
    • 1
この回答へのお礼

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

お礼日時:2012/06/28 10:26

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

    • good
    • 0
この回答へのお礼

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

お礼日時:2012/06/28 10:20

リファレンスをしっかり読みましょう。


getElementsByClassなんてものは定義されていません。

参考URL:http://www.openspc2.org/JavaScript/JavaScript_DO …
    • good
    • 0
この回答へのお礼

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

お礼日時:2012/06/28 10:19

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!