表の行を隠して表示するクラスを追加および削除するにはどうすればよいですか？

Question

Ruby on Railsアプリケーションの私の現在の状況では、データベースから来たサーバの高度な詳細を表示するために各テーブルトウにドロップダウン機能を作ろうとしています。私のスルー・プロセスは、隠し行のデフォルトをdisplay：noneにすることです。それを表示するためにクリックされたときに表示クラスを追加し、再度クリックすると表示クラスを非表示にします。 ここに私のjavascriptです：

var hideDetails, showDetails; 
showDetails = function() { 
    $(this).closest('tbody').addClass('viewing'); 
    return false; 
}; 
hideDetails = function() { 
    $(this).closest('tbody').removeClass('viewing'); 
    return false; 
}; 


$table.on('click', 'tbody.viewing', hideDetails); 
$table.on('click', '.details-link', showDetails); 

その後、私のCSS：

table.collapsible { 
    // css for drop-down 
    #hiddenRow.details { 
     display: none; 
     tbody.viewing { 
      #hiddenRow.details { 
      display: table-row; 
      } 
     } 
    } 
    } 

最後に、私のHTMLコード：私の問題でも、私のCSSのが、私が持っているということです

<table id="servertable" class="paginated table collapsible table-hover sortable" 
    data-sort-name="name" data-sort-order="desc"> 
    <tr style="background-color: #cccccc"> 
    <th><%= sortable "pod_id" %></th> 
    <th><%= sortable "ip"%></th> 
    <th><%= sortable "status"%></th> 
    <th><%= sortable "datacenter"%></th> 
    <th><%= sortable "memory_used"%></th> 
    <th></th> 
    </tr> 
    <!--A for loop to iterate through the database and put it into the table--> 
    <tbody> 
    <% @servers.each_with_index do |server| %> 
     <tr> 
     <td><%= server.pod_id %></td> 
     <td><%= server.ip %></td> 
     <td><%= server.status %></td> 
     <td><%= server.datacenter %></td> 
     <td><%= (server.memory_used * 100).floor %>%</td> 
     <td><input type="button" onclick="showDetails(); hideDetails();"></input></td> 
     <tr id="hiddenRow"> 
      <td colspan="6">Information</td> 
     </tr> 
     </tr> 
    <% end %> 
    </tbody> 
</table> 

非表示の行のデフォルト表示はnoneになりますが、まだ画面に表示されています。ボタンは機能しません。助けていただければ幸いです。

注：私は私のテーブルのような私たちのような他の機能を持っているので私のHTMLコードにいくつかの余分なものがあります、私の質問とは関係ありません。

Answer 1

あなたのCSSを書く方法は間違っています。コンパイルされたとき、それは、この宣言になってしまいます。

table.collapsible #hiddenRow.details{ 
    display: none; 
} 

table.collapsible #hiddenRow.details tbody.viewing #hiddenRow.details{ 
    display: table-row; 
} 

をクラス.detailsをID hiddenRowであなたのTRに設定されていないので、だから、最初の宣言（table.collapsible＃のhiddenRow.detailsは）何も見つけないでしょう。

また、2番目の宣言も、明らかに変わったセレクタがあるため、何もヒットしません。

あなたはこのCSSを使用することがあります。

table.collapsible { 
    #hiddenRow { 
     display: none; 
    } 
    tbody.viewing { 
     #hiddenRow { 
     display: table-row; 
     } 
    } 
} 

また、あなたは別の<tr>タグ内<tr>タグを置くことは避けるべきです。 <input>の代わりに<a>または<button>タグを使用する必要があります（一部のhtmlではイベント「クリック」を既にバインドしているため、onclick属性は必要ありません）。