切換表格顯示：不是第一列

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> 

Answer 2

如果我理解正確，您可以做這樣的事情

 $("button").on("click", function(){ $("table tr td:not(:first-child)").hide(); }); 

 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>remove</button> <table> <tr> <td>adsa</td> <td>asdas</td> <td>adasd</td> <td>adad</td> <td>adasd</td> <td>asdasd</td> </tr> </table> </html> 

Answer 3

試試這個，現在添加！

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

讓我知道是否有幫助！

Answer 4

您有正確的代碼，但這只是Opening script標簽。 替換為： <style>/*A code here*/</style>也許只是令人困惑？ 除此之外，萬事俱備。

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

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

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

這應該是源代碼。

希望這會有所幫助！

Answer 5

除非我誤解了您的問題，否則我認為您已經使事情變得復雜了。 為什么不只使用.show（）

$(document).on('click', '#revealbutton', function() {
    $('#tablegrid tr td').show();
});

它在JSFiddle中工作