如何使用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

Answer 1

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 (ie 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 (ie 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>