logo
down
shadow

Collapse table rows on page load


Collapse table rows on page load

By : user2951057
Date : November 18 2020, 01:01 AM
may help you . I have some jquery that collapses some table rows on click. Is there a way to change it so that it loads collapsed as opposed to opened? , try this
code :
$('tbody > tr:not(.collapse)').hide();
tbody > tr:not(.collapse){
    display: none;
}


Share : facebook icon twitter icon
. Otherwise use a CSS selector (not shown).
code :
<table>
  <tbody id="table-body">

  </tbody>
</table>
<script language="javascript">
  $(window.document).ready(function () {
    var tableRows = Array(), 
      i = 0, 
      tempRow = undefined;

    //clone each row node to the local array
    $('#table-body').children().each(function cloneRowsToArray() {
        tableRows.push($(this).clone());
    });

    //re-order the array as necessary
    tempRow = tableRows[0];
    tableRows[0] = tableRows[1];
    tableRows[1] = tempRow;

    //re-write the newly arranged rows.
    $('#table-body').children().each(function replaceEachRowFromArray() {
        $(this).replaceWith(tableRows[i]);
        i += 1;
    });
  });
</script>
AJAX page load table rows | Safari

AJAX page load table rows | Safari


By : Jayce
Date : March 29 2020, 07:55 AM
should help you out Actually it was just an issue with my HTTPRequest function. I could fix the problem by adding a new argument, a callback function.
So I'm then calling the callback in my HTTPRequest when status code is 200 and ready state is 4.
Table rows not calculating on page load

Table rows not calculating on page load


By : Joaquin Campero
Date : March 29 2020, 07:55 AM
this one helps. You have no this on page load. So it can't find thisRow. The offending line is var thisRow = $(this).closest('tr');
The way I've done this in the past is to find the first input in question and trigger the event, thus calling the method with a fully inflated event.
Change the order of table rows on page load

Change the order of table rows on page load


By : Jarvis
Date : March 29 2020, 07:55 AM
wish helps you What about something like this?
Add an id to the
How to collapse expanded rows on page Load

How to collapse expanded rows on page Load


By : Maraline Torres
Date : March 29 2020, 07:55 AM
it fixes the issue I need your help in collapsing the expanded rows which are coming by default when the page loads. Here is the javascript code: , Add the below CSS:
code :
.RowToClick {
      display:none;
 }
<tr class="RowToClick" style="display:none">
Showing all the table rows on the last page with pagination on page load

Showing all the table rows on the last page with pagination on page load


By : parth_mishra
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Use the .last() method on a jQuery selector to select the last element in a query and set it's state.
Edit: The way you should toggle through multiple rows, is exactly the same. Do it by splitting your tables into smaller chunks and toggle the visibility of the tables.
code :
$(document).ready(function(){
    $('#data').after('<div id="nav"></div>');
    
    // Select all the tables.
    var $tables = $('#data table');
    
    var tablesShown = 1;
    var tablesTotal = $tables.length;
    var numPages = tablesTotal / tablesShown;
    for(var i = 0;i < numPages;i++) {
        var pageNum = i + 1;
        $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
    }
    
    // Select all links.
    var $navs = $('#nav a');
    
    // Hide all rows and show the last one.
    $tables.hide().last().show();
    
    // Add active to last link
    $navs.last().addClass('active');
    
    // Listen to click.
    // Use on instead of bind
    $navs.on('click', function(){
      $navs.removeClass('active');
      $(this).addClass('active');
      var currPage = $(this).attr('rel');
      var $currentTable = $($tables.get(currPage));
      $tables.hide();
      $currentTable.show();
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="data">
  <table>
    <thead>
      <tr>
        <th>head</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data1</td>
      </tr>
      <tr>
        <td>data2</td>
      </tr>
      <tr>
        <td>data3</td>
      </tr>
      <tr>
        <td>data4</td>
      </tr>
      <tr>
        <td>data5</td>
      </tr>
    </tbody>
  </table>
  <table>
    <thead>
      <tr>
        <th>head</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data6</td>
      </tr>
      <tr>
        <td>data7</td>
      </tr>
      <tr>
        <td>data8</td>
      </tr>
      <tr>
        <td>data9</td>
      </tr>
      <tr>
        <td>data10</td>
      </tr>
    </tbody>
  </table>
</div>
Related Posts Related Posts :
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • Angular ui-grid - DropDown Selection shows Id
  • jquery addclass when there is content on body
  • JQUERY : CSS does not apply to dynamically created elements
  • Bootstrap multiselect dropdown checkbox not working on paginated table
  • JQuery scroll to dynamic id
  • Jquery first time tried ajax
  • Disable the link on the active tab (Bootstrap)
  • How to handle this validation when a div is added?
  • how to show/hide and check/uncheck checkboxes dynamically inside kendo grid
  • Conditional parameters for AJAX function
  • Jquery add class to input checkbox field
  • Bootstrap countdown timer Jquery
  • Open the closest modal of jQuery clicked element
  • change background color of specific button on click
  • Can I create link as post to 3rd party site and open in new tab?
  • ID is 'undefined' using .each()
  • Using .each() for targeting each child differently in Jquery
  • How to return data from functions in function
  • Execute this jquery only when viewport is bigger than
  • Bootbox showing white box behind dialog
  • Toggle multiple classes with prevAll(), nextAll(), slice(), and duplicate classes... better way?
  • Show/hide list items and add more/less link
  • Going through all occurences of class on slider change
  • Call jQuery valid() without updating the screen
  • hide and show ActionLink and save data in database - MVC
  • Pass each object in JSON array to query
  • Toggling content div on one-page site with jQuery
  • Foundation Equalizer is setting height to inherit?
  • carousel navigation each function
  • changing color of text color with input slider
  • jquery: filter using AND OR in selector
  • Call a function If any Item is chosen From select box , After Dom update
  • Target class within a jquery object
  • How to scroll a web page with fixed navigation bar just before arrive to a section or div?
  • How to add a class name to a specific selector
  • How to prevent background scrolling
  • How can I disable previous/next in OwlCarousel2 if there aren't enough items to scroll?
  • How to pass products and quantities to ASP.NET MVC4 Web API from form submit
  • jQuery css3 attribute not working
  • WordPress One Page Style Menus Scrolling
  • jquery.unobtrusive-ajax.js is not capturing the Submit event
  • Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'
  • can't get correct checkbox value
  • jquery tooltipster plugin, hide all tips?
  • How to set 3 different colors at jQuery UI Slider
  • How to convert a string to html and add a event, descard after use?
  • How can I make jQuery wait for div display value to change to "block", then make ajax call?
  • Stellar.js giving uncaught type error
  • Saving form data to local storage and show it on refresh
  • Jquery carousel not being implemented
  • Use modal with external URL body and dynamic links from data attribute
  • Looking to simplify my jquery
  • Bootstrap datepicker query?
  • Navbar/header animated change on scroll
  • Bootstrap paginated table sending only 10 row's data to server
  • Bootstrap 3.0 & NiceScroll 3.5.0
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org