Javascript table row display/hide

Question

I have created a table using Javascript/Backbone. While using a template to display the rows I have one visible row and one hidden from the start. When I click on a specific table I want it to 'expand' by showing the hidden row placed under the visible one. I'm also using a loop to create the table so all the rows have the same class and id. So far I used this to expand and collapse the rows:

expandRow: function() {
    if (document.getElementById('hiddenText').style.display == 'none' ) {
        document.getElementById('hiddenText').style.display = '';
    }
    else if (document.getElementById('hiddenText').style.display == '') {
        document.getElementById('hiddenText').style.display = 'none';
    }

However this solution only opens and closes the same table row (the top one) no matter which row I click on. I need help to find a solution to only expand/collapse the specific row I click on.

Refer this one http://stackoverflow.com/a/32474501/3583859 – Vijay Kumbhoje Sep 24 '15 at 09:22 — Vijay Kumbhoje, Sep 24 '15 at 09:22

score 3 · Accepted Answer · answered May 10 '13 at 01:06

IDs must be unique to the page. If they are not unique, then your JavaScript will just select the first occurence, in this case, the first row with "hiddenText" as the ID.

You will need to select your desired row via some sort of reference. So, perhaps in the loop that creates the table you can include an incremental index in the row ids, then select the appropriate row via that method.

Marcus Santodonato · Answer 2 · 2013-05-10T14:23:19.170

Your script is stopping at the first element with that ID because they are not unique. You need to have your loop dynamically create unique ID's. To achieve this, I would use an integer counter variable (var counter) to append a unique number to the end of the ID. I would then change the condition of your if statement to fetch by the class name instead of the ID (getElementsByClassName('RowExpand')) and store them all in a variable (var hasClassRowExpand). On the onClick event, you can get a reference to the ID for the row you clicked and then loop through each element in hasClassRowExpand. When you hit the index containing the element with the matching ID, manipulate the display property based on its current state.

score 0 · Answer 3 · answered May 10 '13 at 05:06

0

I don't know the internals of how you have constructed the view. Assuming that this.$el is the table that you are interested in below is the code i would write

expandRow: function() {
    if (this.$el.find("tr:hidden").length) {
        this.$el.find("tr:hidden").attr("display","");
    }
    else{
        $.el.find("tr:not(:hidden)").hide();
    }

Above code is written with loads of assumption, so probably it can be wrong. But this is the way you should write your views

answered May 10 '13 at 05:06

Deeptechtons

10,945
27
96
178

Thank you for your answer Deeptechtons! I've tried to implement it the way you described but without any luck. Could you possibly take a look at the full javascript code and show me the proper way how to implement your method? If so you will find the full js here: http://jsfiddle.net/6xtj5/ – Mati Kowa May 15 '13 at 00:35
@MatiKowa Don't know if something is wrong on my side by the Fiddle does not run and results in Js errors – Deeptechtons May 16 '13 at 04:13

score 0 · Answer 4 · answered Sep 05 '14 at 11:22

0

I use a CSS class definition like this...

.hiddenRowTrue { display:none; }
.hiddenRowFalse { display:table-row; }

... use JQuery toggleClass to flip the state.

answered Sep 05 '14 at 11:22

Steve Hibbert

2,045
4
30
49

Javascript table row display/hide

4 Answers4