How to make unvisible the rows of table that out of screen using javascript / jquery

Question

I have a large table has 6K rows and its slowing down all functionality on page. I can't hide the rows with display:none because I have some jquery functions that gathering some info from all tr's in table. Is it possible to make unvisible the rows that out of screen and make visible some part of them when scrolling? So page can speed up.

Rows:

<tr id="mainD0002" class="locations">
   <td>
      <div class="media-left">
         <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
   </td>
   <td></td>
   <td style="width: 200px">
      <table width="100%" class="counttable">
         <tbody>
            <tr id="locationD0002" class="detailD0002">
               <td align="right">
                  <ul class="ccontainer">
                     <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
                  </ul>
               </td>
            </tr>
         </tbody>
      </table>
   </td>
   <td style="width: 50px;"><input type="text" class="controlin" value="0" tabindex="1"></td>
   <td style="width: 50px;" class="text-center">
      <ul class="icons-list">
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
            <ul class="dropdown-menu dropdown-menu-right">
               <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
               <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
               <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
               <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
            </ul>
         </li>
      </ul>
   </td>
</tr>

Any advise will help a lot Thanks

`display: none` is how you make things invisible. It won't affect Javascript that gathers info from all the rows. — Barmar, Dec 21 '18 at 23:38
Thanks for your answer. With a filter, i am showing / hiding some tr's and function makes some calculations according to rest of tr's. — user3325207, Dec 22 '18 at 00:33

Oliver Trampleasure · Answer 1 · 2018-12-22T01:09:16.083

I'm not sure how much this will improve your performance, but it might be helpful.

I have adapted a function from ADB's answer to another question which lets us check if an element is visible. If the row is not visible then it adds a class .offscreen to the row. I have also added the class .hide_off to all but the first td of your rows.

A little CSS allows us to hide all but the first column for rows that are not visible, but when you scroll they become visible.

I haven't tested this with a large number of rows like you're suggesting... so am not sure if this will be any more efficient but it might be worth a try.

Update: As mentioned by charlietfl, the processing required for this is approach is excessive. This answer isn't practical, but I'll leave it here incase anyone can cannibalise parts of it into something useful.

If you don't need to see the information then I would suggest using Barmar's advice and simply hiding it permanently with display:none;.

Hope it helps

// Run function once page is loaded
$(document).ready(function() {
  checkVisible();
});


// Run function after scrolling
$(window).scroll(function() {
  checkVisible();
});


// Check if rows are visible
function checkVisible() {

  var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
  var top_of_screen = $(window).scrollTop();

  // Check each row
  $("tr").each(function() {

    // Adapted from ADB's answer - check if the element is visible
    var top_of_element = $(this).offset().top;
    var bottom_of_element = $(this).offset().top + $(this).outerHeight();

    // If not visible then add 'offscreen' class to row
    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
      $(this).removeClass("offscreen");
    } else {
      $(this).addClass("offscreen");
    }
  });

}

tr.offscreen .hide_off {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>

  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>


  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>


  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>



  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>



  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>



  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>



  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>



  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>



  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>



  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>


  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>

</table>

Alternative Solution

An easy alternative would be to add a click event to each row in order to show the extra information. hover would also work but then you would need to have a set height for the rows (i.e. the height of a row when everything is shown) or you'll have some UI issues.

This doesn't actually have the functionality you initially requested (i.e. elements appearing immediately on scroll), but is a low-resource alternative.

$("tr.locations").click( function() {
  $(this).toggleClass("show");
});

tr .hide_off {
  display: none;
}
tr.show .hide_off {
  display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table>

  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>


  <tr id="mainD0002" class="locations">
    <td>
      <div class="media-left">
        <div class="mainlocation"><b>DDSS001</b><br><span class="text-muted">D0002</span></div>
      </div>
    </td>
    <td></td>
    <td style="width: 200px" class="hide_off">
      <table width="100%" class="counttable">
        <tbody>
          <tr id="locationD0002" class="detailD0002">
            <td align="right">
              <ul class="ccontainer">
                <li id="c576" class="ccount-576" data-sid="576"><span id="576span" class="approved badge badge-flat all">12</span> </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td style="width: 50px;" class="hide_off"><input type="text" class="controlin" value="0" tabindex="1"></td>
    <td style="width: 50px;" class="text-center hide_off">
      <ul class="icons-list">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="icon-menu7"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" class="add"><i class="icon-download"></i> Add</a></li>
            <li><a href="#" class="discard"><i class="icon-file-text"></i> Discard</a></li>
            <li><a href="#" class="flush"><i class="icon-trash"></i> Flush</a></li>
            <li><a href="#" class="delete"><i class="icon-x"></i> Delete</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>



</table>

Thanks for your answer. It improve the loading speed but scroll is much more slower then before. — user3325207, Dec 22 '18 at 00:37
Use some throttling on this. That's a lot of processing for each pixel move of scroll — charlietfl, Dec 22 '18 at 00:41
I'm not convinced my answer would ever be a practical solution... I've added an update stating that in case someone doesn't read the comments. Thanks charlietfl. — Oliver Trampleasure, Dec 22 '18 at 01:11

How to make unvisible the rows of table that out of screen using javascript / jquery

1 Answers1

Alternative Solution