troubleshooting Question

Javascript to collapse Bootstrap table rows

Avatar of martmac
martmacFlag for United Kingdom of Great Britain and Northern Ireland asked on
JavaScriptBootstrap
8 Comments1 Solution1593 ViewsLast Modified:
I have some javascript that expands a table row on click, the row expands fine and if I select  a row above the row I have just expanded, that expands too. However, if I select a row below the an expanded row, it does does expand slightly but not with the content that appears in the rows above. (hope this makes sense.

What I would like to do is to close all expanded rows before it opens the one selected  so that there can only be one expanded row expanded at a time, but not sure how to do this. I assume i would have to do this wth a class. Am new to javascript, so I may be missing something obvious.

Thanks in advance

Code below;

                     // ROW EXPANDER CONSTRUCT =================================================================
                                var $table = $('#testTable');

                                $table.on('expand-row.bs.table', function(e, index, row, $detail) {
                                var res = $("#desc" + index).html();
                                $detail.html(res);                                                               
                                });

                                $table.on("click-row.bs.table", function(e, row, $tr) {
                                
                                // Get selected row
                                var tbl = document.getElementById("testTable");
                                if (tbl != null) {
                                for (var i = 0; i < tbl.rows.length; i++) {
                                    tbl.rows[i].onclick = function () { getRowVal(this); };
                                    }
                                }

                                        function getRowVal(row) {
                                        var rowVal = parseInt(row.rowIndex);
                                        var rowVal = rowVal-1
                                        console.log('Row selected - '+ rowVal)                                                            
                                   
                                if ($tr.next().is('tr.detail-view')) {

                                      $('.spanEdit').attr('class', 'spanEdit'); 
                                      $table.bootstrapTable('collapseRow', $tr.data('index')); 
                                                                        
                                } 
                                       else {                                       
                                                                              
                                        $('.spanEdit').attr('id', 'desc'+rowVal);                                                                              
                                        $table.bootstrapTable('expandRow', $tr.data('index'));

                                   }
                               
                                }

                                });
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros