javascript - 切换表 :not first column 的显示

Question

我有一个开始时只显示第一列的表格:

#tablegrid tr td:not(:first-child) {
  display:none;
}

如何在单击按钮时显示所有其他列？

下面是我尝试过的:

  $(document).on('click', '#revealbutton', function() {
    $("<style> #tablegrid tr td:not(:first-child) { display:show; } <\/style>").appendTo("head");
  });

Answer 1

将您的代码编辑为 display:table-cell 而不是 display: show

$(document).on('click', '#revealbutton', function() {
    $("<style> #tablegrid tr td:not(:first-child) { display:table-cell; } <\/style>").appendTo("head");
  });

#tablegrid tr td:not(:first-child) {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablegrid">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<button id="revealbutton">click me</button>