jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.24/b-1.7.0/sl-1.3.3/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="Editor-2.0.2/css/editor.dataTables.css">
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.24/b-1.7.0/sl-1.3.3/datatables.min.js"></script>
<script type="text/javascript" src="Editor-2.0.2/js/dataTables.editor.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.3.2/css/fixedColumns.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>

<table id="wbv_8ab7323df86a04aa_1" class="wc-bulk-variations-table nowrap" width="100%"><thead><tr><th class="col-"></th><th class="col-pa_sizepa_color">Size / Color</th><th class="col-30-regular">30 R</th><th class="col-32-regular">32 R</th><th class="col-34-regular">34 R</th><th class="col-22-regular">22 R</th><th class="col-24-regular">24 R</th><th class="col-26-regular">26 R</th><th class="col-28-regular">28 R</th><th class="col-36-regular">36 R</th><th class="col-24-long">24 R</th><th class="col-26-long">26 R</th><th class="col-28-long">28 R</th><th class="col-30-long">30 R</th><th class="col-32-long">32 R</th><th class="col-34-long">34 R</th><th class="col-36-long">36 R</th><th class="col-24-short">24 S</th><th class="col-26-short">26 S</th><th class="col-28-short">28 S</th><th class="col-30-short">30 S</th><th class="col-32-short">32 S</th><th class="col-34-short">34 S</th><th class="col-36-short">36 S</th></tr></thead><tbody><tr id="product-row-sparrow"><td><span class="smashing-table-product-cell"><img width="64" height="64" src="https://mk0rjclassicswgjp2sr.kinstacdn.com/wp-content/uploads/2021/04/Gulf_B7886G-150x150.jpg" class="product-thumbnail product-table-image" alt="Gulf_B7886G" loading="lazy" title="Gulf_B7886G" data-caption=""...

JavaScript

// find elements
jQuery(document).ready(function() {
  var table = jQuery('.wc-bulk-variations-table').DataTable( {
    //scrollX:        true,
    //scrollY: 		'65vh',
    scrollCollapse: true,
    paging:         false,
    searching: 		false,
    info:  			false,
    ordering:  		false,
    fixedColumns: {
      leftColumns: 2
    },
    columnDefs: [{
    	targets:2,
      render: function(data, type, row, meta) {
        if (type === 'display') {
        	return data + row[3];
        }
        return data;
      }
    }]
  });
  table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    var productStyle = jQuery(this).find('td[data-dt-column="3"] span.product-style').clone();
    console.log('productstyle is: ' + productStyle)
    jQuery(this).find('td[data-dt-column="2"] .smashing-table-product-cell').append(productStyle); 
  });
});