如何添加和刪除類以隱藏和顯示表格行？

Question

在我目前在Ruby on Rails應用程序中的情況下，我試圖在每個表拖上創建一個下拉函數，以顯示來自數據庫的服務器的高級詳細信息。 我的直通過程是使隱藏的行默認顯示為：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代碼：

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

我的問題是，即使在CSS中，隱藏行的默認顯示為無，但仍在屏幕上顯示。 以及按鈕無法正常工作。 一些幫助，將不勝感激。

注意：HTML代碼中還有一些額外的東西，因為我的表還有其他一些功能，例如可排序的列，請忽略它，這與我的問題無關。

Answer 1

您編寫CSS的方式是錯誤的。 編譯后將以以下聲明結束：

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

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

因此，第一個聲明（table.collapsible＃hiddenRow.details）將找不到任何內容，因為未在id為hiddenRow的tr中設置類.details。

由於明顯的選擇器，第二個聲明也不會產生任何作用。

您可以使用以下CSS：

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

另外，您應避免將<tr>標記放在另一個<tr>標記內。 您應該使用<a>或<button>標記代替<input> （鑒於已經在某些html上綁定了事件“ click”，因此onclick屬性不是必需的）。