Hiding/showing HTML table rows in mobile version
We have a desktop site where we hide or show HTML table rows on a button click based on what class a <tr> is. The jQuery below is in a script file included in the display page:
Display page code:
- <tr class="parentHeaderRow">
- ...
- ...
- <tr class="parentHeaderRowHidden">
- $('#rowShow').click (function() {
- $("tr.parentRowHidden").css("display", "");
- $("tr.childRowHidden").css("display", "");
- $("tr.grandchildRowHidden").css("display", "");
- });
- $('#rowHide').click (function() {
- $("tr.parentRowHidden").css("display", "none");
- $("tr.childRowHidden").css("display", "none");
- $("tr.grandchildRowHidden").css("display", "none");
- });
Click a button, remove or show the appropriate rows.
When trying to duplicate this hide/show row functionality in a mobile version, we run into an interesting issue.
On the initial page load, the code above will work. But, once we make a selection and refresh the page with new data, say from territory down to district, the code does not work on the subsequent page load. In fact, we do not see any events triggered by button clicks for these scripts.
Things we have tried:
- From -> $(document).ready(function(){
- To -> $(document).bind( "pageinit", function(){
- Including the hide/shows scripts both inside and outside the $(document).bind functionin the script file
- Including the show/hide scripts above in <script> tags in the display page
- Altered the <tr> style and class both inline and via css
Any and all help is greatly appreciated!