时间戳

首页 > 解决方案 > 切换表格的显示：不是第一列

javascript - 切换表格的显示：不是第一列

问题描述

我有一个表格，开始时只显示第一列：

#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");
  });

标签： javascriptjquerycss

解决方案

编辑您的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>

推荐阅读