如何添加和删除一个类来隐藏和显示表格行？

In my current situation in my Ruby on Rails application, I am trying to make a drop-down function on each table tow to show advanced details for a server that comes from a database. My through process is to make the hidden row default to display: none; then add a viewing class when it is clicked to view it, then hide it when it is clicked again. Here is my javascript:

在我目前的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);

Then my css:

那我的css:

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

Lastly, my HTML code:

最后,我的HTML代码:

<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>

My problem is that even though in my css, I have the default display of the hidden row to be none, it is still showing up on the screen. As well as the button not functioning as well. Some help would be appreciated.

我的问题是,即使在我的CSS中,我将隐藏行的默认显示为无,它仍然显示在屏幕上。以及按钮功能不佳。一些帮助将不胜感激。

Note: There is some extra stuff in my HTML code because I have some other functions for my table such us sortable columns, just ignore that, it doesn't have to do with my question.

注意:我的HTML代码中有一些额外的东西,因为我的表有一些其他函数,比如我们可排序的列,只是忽略它,它与我的问题没有关系。

1 个解决方案

#1

The way you are writing your css is wrong. When compiled it will end up with this declaration:

你写css的方式是错误的。编译时,它将以此声明结束:

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

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

So the first declaration (table.collapsible #hiddenRow.details) will find nothing because the class .details is not set on your tr with id hiddenRow.

因此,第一个声明(table.collapsible#hiddenRow.details)将找不到任何内容,因为类ID为hiddenRow的tr未设置类.details。

And the second declaration will hit nothing too, because of the obvious weird selector.

第二个声明也没有任何结果,因为显而易见的怪异选择器。

You may use this css:

你可以使用这个css:

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

Also, you should avoid placing a <tr> tag inside another <tr> tag. You should use a <a> or <button> tag in place of the <input> (the onclick attribute is not necessary given that you already binded the event "click" on some html).

此外,您应该避免将标记放在另一个标记内。您应该使用或

#1