title: How to efficiently toggle table rows in a table with 5000+ entries?
body: <p>I understand how to generally toggle tr's in a table based on selection using jQuery's hide() and show(). This used to work quite effectively with a few hundred rows. Now, I need it to work for 5000+ entries in the DOM. And it freezes the browser completely.</p>
  
  <p>My searches took me to learningjquery.com <a href="http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance" rel="nofollow">here</a></p>
  
  <p>There is a "Enabling/Disabling a stylesheet" method explained in it that is supposed to work like a charm. And it does, except that it works like a charm only on IE9, taking only a second (if that) to filter the rows. On chrome, it takes over 15-20 seconds for the same action. </p>
  
  <p>My trouble is Chrome is used pretty extensively by people for whom this application is being built. Can someone suggest me how to make this solution work in Chrome, or alternatively suggest other ways to handle this scenario.</p>
  
  <ol>
  <li>I have tried other options like .css('display', 'none'), .addClass() and .removeClass(), etc. Nothing seems to make it fast.</li>
  <li>I have tried datatables, and although quite fast afterward, it takes forever to initially load this amount of data.</li>
  </ol>
  
  <p>Update: Many thanks to @jfriend00 and @Ohgodwhy. Here's the final code I have which works across all browsers.</p>
  
  <pre><code>$('#tbl_product_details tbody tr').each( function() {
      var row = $(this);
      row.hasClass("tr_"+cust_id) ? row.removeClass("hide") : row.addClass("hide");
  });
  </code></pre>
  
  <p>Although, as the accepted answer shows, it can be further improved by plain js and by getting the dom elements once on page load, I didn't need to do it. The code is already fast enough, and I would rather have jQuery code all around.</p>