How to use Javascript to make several rows in an HTML table invisible

Question

I have an HTML table and there are several rows in that table that I want to toggle to either be visible or invisible as a group. Since I can't simply put a <div> around them, what would be a good way to 'group' them together.

The multiple tbody solution(s) are the most semantic, IMO.

Shmiddty
– Shmiddty

2012-10-26 18:54:32 +00:00
Commented Oct 26, 2012 at 18:54 — Shmiddty
– Shmiddty, Commented Oct 26, 2012 at 18:54

Suren K · Accepted Answer · 2012-10-26 18:41:14Z

2

try making your html in such a way you can hide/visible and apply your css/js.

<table>
        <tr class="visible"><td></td></tr>
        <tr class="visible"><td></td></tr>
        <tr class="hidden"><td></td></tr>
        <tr class="visible"><td></td></tr>
        <tr class="visible"><td></td></tr>
        <tr class="hidden"><td></td></tr>
        <tr class="visible"><td></td></tr>
</table>

answered Oct 26, 2012 at 18:41

Suren K

414 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

I Hate Lazy · Accepted Answer · 2012-10-26 18:45:09Z

2

You can group them in separate <tbody> elements (since you can't use <div> elements, as you stated).

<table id="mytable">
    <tbody>
        <!-- some rows to group -->
    </tbody>
    <tbody>
        <!-- some rows to group -->
    </tbody>
    <tbody>
        <!-- some rows to group -->
    </tbody>
</table>

Then select the tbody you want.

var table = document.getElementById("mytable");

table.tBodies[1].style.display="none";

answered Oct 26, 2012 at 18:45

I Hate Lazy

49k13 gold badges89 silver badges79 bronze badges

Comments

Max · Accepted Answer · 2012-10-26 18:45:06Z

1

You could use the tbody tag. You can set the id attribute on it.

tbody id="customer1"

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody id="customer1">
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody id="customer2">
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody id="customer3">
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>

Then with JQuery you can easily hide/show.

answered Oct 26, 2012 at 18:45

Max

2,5911 gold badge18 silver badges29 bronze badges

1 Comment

Max Over a year ago

yeah you're right, but the question is more about "grouping" the element in html than "hiding" them with js

Joel Etherton · Accepted Answer · 2012-10-26 18:41:02Z

0

I would recommend a jQuery solution to you. Provide all of your <tr> tags a common class and a unique id (for individual selection). Then you can use jQuery to grab them.

$('tr .commonClass').css("display", "none");

You could also just swap classes with the individual ids

$('#someTR').removeClass("visibleClass");
$('#someTR').addClass("invisibleClass");

Note: For the record I prefer @Yograj Gupta's method, but he beat me to the punch posting.

answered Oct 26, 2012 at 18:41

Joel Etherton

37.5k10 gold badges92 silver badges106 bronze badges

Comments

Anoop · Accepted Answer · 2012-10-26 18:44:47Z

0

Pure JavaScript jsfiddle

<table>
        <tr class="show"><td></td></tr>
        <tr class="show"><td></td></tr>
        <tr class="hide"><td></td></tr>
        <tr class="show"><td></td></tr>
        <tr class="show"><td></td></tr>
        <tr class="hide"><td></td></tr>
        <tr class="show"><td></td></tr>
</table>

JS:

var trGroup = document.getElementsByClassName("hide");
for(var k=0; k < trGroup.length; k++){
     trGroup[k].style.display = "none";
}

answered Oct 26, 2012 at 18:44

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Place a common class on the rows which you want to group. than work on that like

or you have some set of rules for visible or hidden, rows group you can simple use css + javascript like

HTML

<table id="myGroupTab">
    <tr class="group1"><td>&nbsp;</td></tr>
    <tr class="group1"><td>&nbsp;</td></tr>
    <tr class="group2"><td>&nbsp;</td></tr>
    <tr class="group2"><td>&nbsp;</td></tr>
    <tr class="group1"><td>&nbsp;</td></tr>
</table>

you can write some css rules like

CSS

#myGroupTab.showGrp1 .group1{ display:block;}
#myGroupTab.showGrp1 .group2{ display:none;}

#myGroupTab.showGrp2 .group1{ display:none;}
#myGroupTab.showGrp2 .group2{ display:block;}

You can use Javascript like

JS

document.getElementById('myGroupTab').className = "showGrp1"; //To Show Only tr.group1
document.getElementById('myGroupTab').className = "showGrp2"; //To Show Only tr.group2

Its even simple to make display none or block applying a class on parent, instead of looping every tr...

Or by jQuery you can achieve this, make them visible or hidden using jQuery.

$("tr.group1").hide() or  $("tr.group2").show()

@user1689607 solution using multiple tbody(s) in table is also a good solution.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 26, 2012 at 18:40

Yograj Gupta

9,8673 gold badges31 silver badges50 bronze badges

1 Comment

Yograj Gupta Over a year ago

@epascarello, Yes there is no jQuery tag in question.

Collectives™ on Stack Overflow

How to use Javascript to make several rows in an HTML table invisible

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

HTML

CSS

JS

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

HTML

CSS

JS

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related