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.

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.

• javascript
• backbone.js
• expand

• Refer this one stackoverflow./a/32474501/3583859 – Vijay Kumbhoje Commented Sep 24, 2015 at 9:22

4 Answers 4

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.

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

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.

I use a CSS class definition like this...

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

... use JQuery toggleClass to flip the state.