Ndtyjky

I'm working on a site built in WordPress/WooCommerce. I didn't ask this question on the WordPress-StackExchange since the question isn't about the WordPress-/WooCommerce-part.

On the site, there are a few <table>'s, that needed styling. So I added this jQuery-snippet, to add the .table-class to all the tables (found here).

jQuery(document).ready(function(){

  // Make all tables into Bootstrap-tables

  jQuery( 'main' ).find( 'table' ).each( function() {

      jQuery( this ).addClass( 'table' );

    }

  );

});

However... On one of the pages (the cart), there is an AJAX-request that updates the cart. And when it returns the new information, then the table no longer has the class (or the stylings).

I would hate to style that table manually, when everthing is 'right there', delivered from Bootstrap.

I considered these two options:

• A) Add something to my script, that checks for AJAX-request or something like that? And if so, - how do I do that?

or

• B) Do something, so the Bootstrap-styles applied to all <table>-elements (and not just <table class='table'>-elements? And if so, - how do I do that? Changing bootstrap.min.css seem like a bad idea.

They both seem hacky/clumbsy. Am I missing a better way of doing this?

you can use ajaxComplete

this work when every ajax request completes.

$( document ).ajaxComplete(function( event, xhr, settings ) {

      $("table").addClass("table");

});