Toggle display of table :not first column

Question

I have a table that starts off showing only the first column:

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

How can I display all of the other columns when a button is clicked?

Below is what I tried:

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

Answer 1

Edit your code as display:table-cell not 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

If i understand correctly you could make something like this

 $("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

Try this, is appending now!

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

Let me know if that help!

Answer 4

You have correct code, But it's just the Opening script tag. replace it with: <style>/*A code here*/</style> Maybe that's just being Confusing? Besides that, Everything is goood.

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

This should be the Source code.

Hopes this helps!

Answer 5

Unless I misunderstood your question, I think that you're over complicating things. Why not just use .show()

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

It works in JSFiddle