Toggle display of table :not first column

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

edited Nov 14 '18 at 17:17

asked Nov 14 '18 at 17:13

user749798

1,48583058

Its a proposital thing or you missed it ? on your script example you opened a script tag and closed a style tag it must be style in the first tag ?

– João Deroldo
Nov 14 '18 at 17:15

Fixed that. But still does not work with both style tags

– user749798
Nov 14 '18 at 17:18

Why are you appending style to the head? Why not just use $('#tablegrid tr td').show();?

– Snake14
Nov 14 '18 at 17:19

add a comment |

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

edited Nov 14 '18 at 17:17

asked Nov 14 '18 at 17:13

user749798

1,48583058

Its a proposital thing or you missed it ? on your script example you opened a script tag and closed a style tag it must be style in the first tag ?

– João Deroldo
Nov 14 '18 at 17:15

Fixed that. But still does not work with both style tags

– user749798
Nov 14 '18 at 17:18

Why are you appending style to the head? Why not just use $('#tablegrid tr td').show();?

– Snake14
Nov 14 '18 at 17:19

add a comment |

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

edited Nov 14 '18 at 17:17

asked Nov 14 '18 at 17:13

user749798

1,48583058

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

javascript jquery css

edited Nov 14 '18 at 17:17

asked Nov 14 '18 at 17:13

user749798

1,48583058

edited Nov 14 '18 at 17:17

asked Nov 14 '18 at 17:13

user749798

1,48583058

edited Nov 14 '18 at 17:17

asked Nov 14 '18 at 17:13

user749798

1,48583058

asked Nov 14 '18 at 17:13

user749798

1,48583058

asked Nov 14 '18 at 17:13

user749798

1,48583058

Its a proposital thing or you missed it ? on your script example you opened a script tag and closed a style tag it must be style in the first tag ?

– João Deroldo
Nov 14 '18 at 17:15

Fixed that. But still does not work with both style tags

– user749798
Nov 14 '18 at 17:18

Why are you appending style to the head? Why not just use $('#tablegrid tr td').show();?

– Snake14
Nov 14 '18 at 17:19

add a comment |

Its a proposital thing or you missed it ? on your script example you opened a script tag and closed a style tag it must be style in the first tag ?

– João Deroldo
Nov 14 '18 at 17:15

Fixed that. But still does not work with both style tags

– user749798
Nov 14 '18 at 17:18

Why are you appending style to the head? Why not just use $('#tablegrid tr td').show();?

– Snake14
Nov 14 '18 at 17:19

Its a proposital thing or you missed it ? on your script example you opened a script tag and closed a style tag it must be style in the first tag ?

– João Deroldo
Nov 14 '18 at 17:15

Fixed that. But still does not work with both style tags

– user749798
Nov 14 '18 at 17:18

Why are you appending style to the head? Why not just use $('#tablegrid tr td').show();?

– Snake14
Nov 14 '18 at 17:19

add a comment |

5 Answers
5

active

oldest

votes

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>

answered Nov 14 '18 at 17:24

Luu Hoang Bac

12911

add a comment |

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>

answered Nov 14 '18 at 17:20

João Deroldo

39518

I think that your snippet does the opposite of what the OP is asking. I think that .hide() should be .show() and all but the first row should start out hidden.

– Snake14
Nov 14 '18 at 17:25

add a comment |

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!

answered Nov 14 '18 at 17:21

MartinBA

7161213

add a comment |

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!

answered Nov 14 '18 at 17:24

PIZZZZZZZZZZZA is here

778

add a comment |

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

edited Nov 15 '18 at 2:26

PIZZZZZZZZZZZA is here

778

answered Nov 14 '18 at 17:36

Snake14

28917

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305516%2ftoggle-display-of-table-not-first-column%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

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>

answered Nov 14 '18 at 17:24

Luu Hoang Bac

12911

add a comment |

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>

answered Nov 14 '18 at 17:24

Luu Hoang Bac

12911

add a comment |

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>

answered Nov 14 '18 at 17:24

Luu Hoang Bac

12911

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>

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

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

answered Nov 14 '18 at 17:24

Luu Hoang Bac

12911

answered Nov 14 '18 at 17:24

Luu Hoang Bac

12911

answered Nov 14 '18 at 17:24

Luu Hoang Bac

12911

answered Nov 14 '18 at 17:24

Luu Hoang Bac

12911

add a comment |

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>

answered Nov 14 '18 at 17:20

João Deroldo

39518

I think that your snippet does the opposite of what the OP is asking. I think that .hide() should be .show() and all but the first row should start out hidden.

– Snake14
Nov 14 '18 at 17:25

add a comment |

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>

answered Nov 14 '18 at 17:20

João Deroldo

39518

I think that your snippet does the opposite of what the OP is asking. I think that .hide() should be .show() and all but the first row should start out hidden.

– Snake14
Nov 14 '18 at 17:25

add a comment |

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>

answered Nov 14 '18 at 17:20

João Deroldo

39518

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>

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

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

answered Nov 14 '18 at 17:20

João Deroldo

39518

answered Nov 14 '18 at 17:20

João Deroldo

39518

answered Nov 14 '18 at 17:20

João Deroldo

39518

answered Nov 14 '18 at 17:20

João Deroldo

39518

I think that your snippet does the opposite of what the OP is asking. I think that .hide() should be .show() and all but the first row should start out hidden.

– Snake14
Nov 14 '18 at 17:25

add a comment |

I think that your snippet does the opposite of what the OP is asking. I think that .hide() should be .show() and all but the first row should start out hidden.

– Snake14
Nov 14 '18 at 17:25

I think that your snippet does the opposite of what the OP is asking. I think that .hide() should be .show() and all but the first row should start out hidden.

– Snake14
Nov 14 '18 at 17:25

add a comment |

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!

answered Nov 14 '18 at 17:21

MartinBA

7161213

add a comment |

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!

answered Nov 14 '18 at 17:21

MartinBA

7161213

add a comment |

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!

answered Nov 14 '18 at 17:21

MartinBA

7161213

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!

answered Nov 14 '18 at 17:21

MartinBA

7161213

answered Nov 14 '18 at 17:21

MartinBA

7161213

answered Nov 14 '18 at 17:21

MartinBA

7161213

answered Nov 14 '18 at 17:21

MartinBA

7161213

add a comment |

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!

answered Nov 14 '18 at 17:24

PIZZZZZZZZZZZA is here

778

add a comment |

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!

answered Nov 14 '18 at 17:24

PIZZZZZZZZZZZA is here

778

add a comment |

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!

answered Nov 14 '18 at 17:24

PIZZZZZZZZZZZA is here

778

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!

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

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

answered Nov 14 '18 at 17:24

PIZZZZZZZZZZZA is here

778

answered Nov 14 '18 at 17:24

PIZZZZZZZZZZZA is here

778

answered Nov 14 '18 at 17:24

PIZZZZZZZZZZZA is here

778

answered Nov 14 '18 at 17:24

PIZZZZZZZZZZZA is here

778

add a comment |

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

edited Nov 15 '18 at 2:26

PIZZZZZZZZZZZA is here

778

answered Nov 14 '18 at 17:36

Snake14

28917

add a comment |

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

edited Nov 15 '18 at 2:26

PIZZZZZZZZZZZA is here

778

answered Nov 14 '18 at 17:36

Snake14

28917

add a comment |

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

edited Nov 15 '18 at 2:26

PIZZZZZZZZZZZA is here

778

answered Nov 14 '18 at 17:36

Snake14

28917

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

edited Nov 15 '18 at 2:26

PIZZZZZZZZZZZA is here

778

answered Nov 14 '18 at 17:36

Snake14

28917

edited Nov 15 '18 at 2:26

PIZZZZZZZZZZZA is here

778

edited Nov 15 '18 at 2:26

PIZZZZZZZZZZZA is here

778

edited Nov 15 '18 at 2:26

PIZZZZZZZZZZZA is here

778

answered Nov 14 '18 at 17:36

Snake14

28917

answered Nov 14 '18 at 17:36

Snake14

28917

answered Nov 14 '18 at 17:36

Snake14

28917

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb