javascript - Set order of table using column in jquery -
i have table : 
and below html of above table.i trying order table sox_color , size.like color alphabet a size 1 come first , one.should use jquery sorting plugin or custom code can me.
<table class="configurable-product-table" cellspacing="0"> <tbody> <tr> <th>size</th> <th>sox_colour</th> <th>availability</th> <th> </th> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[758][140]" value="17"> </td> <td>red <input type="hidden" name="super_attribute_quickshop[758][139]" value="10"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[758]" value="0"> </td> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[761][140]" value="17"> </td> <td>pink <input type="hidden" name="super_attribute_quickshop[761][139]" value="66"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[761]" value="0"> </td> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[764][140]" value="17"> </td> <td>orange <input type="hidden" name="super_attribute_quickshop[764][139]" value="63"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[764]" value="0"> </td> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[767][140]" value="17"> </td> <td>light green <input type="hidden" name="super_attribute_quickshop[767][139]" value="80"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[767]" value="0"> </td> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[770][140]" value="17"> </td> <td>purple <input type="hidden" name="super_attribute_quickshop[770][139]" value="52"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[770]" value="0"> </td> </tr> <tr> <td>6-11 <input type="hidden" name="super_attribute_quickshop[771][140]" value="18"> </td> <td>purple <input type="hidden" name="super_attribute_quickshop[771][139]" value="52"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[771]" value="0"> </td> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[773][140]" value="17"> </td> <td>beige <input type="hidden" name="super_attribute_quickshop[773][139]" value="53"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[773]" value="0"> </td> </tr> <tr> <td>6-11 <input type="hidden" name="super_attribute_quickshop[774][140]" value="18"> </td> <td>beige <input type="hidden" name="super_attribute_quickshop[774][139]" value="53"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[774]" value="0"> </td> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[776][140]" value="17"> </td> <td>grey <input type="hidden" name="super_attribute_quickshop[776][139]" value="56"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[776]" value="0"> </td> </tr> <tr> <td>6-11 <input type="hidden" name="super_attribute_quickshop[777][140]" value="18"> </td> <td>grey <input type="hidden" name="super_attribute_quickshop[777][139]" value="56"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[777]" value="0"> </td> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[779][140]" value="17"> </td> <td>brown <input type="hidden" name="super_attribute_quickshop[779][139]" value="78"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[779]" value="0"> </td> </tr> <tr> <td>6-11 <input type="hidden" name="super_attribute_quickshop[780][140]" value="18"> </td> <td>brown <input type="hidden" name="super_attribute_quickshop[780][139]" value="78"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[780]" value="0"> </td> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[782][140]" value="17"> </td> <td>navy <input type="hidden" name="super_attribute_quickshop[782][139]" value="64"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[782]" value="0"> </td> </tr> <tr> <td>6-11 <input type="hidden" name="super_attribute_quickshop[783][140]" value="18"> </td> <td>navy <input type="hidden" name="super_attribute_quickshop[783][139]" value="64"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[783]" value="0"> </td> </tr> <tr> <td>2-8 <input type="hidden" name="super_attribute_quickshop[785][140]" value="17"> </td> <td>black <input type="hidden" name="super_attribute_quickshop[785][139]" value="9"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[785]" value="0"> </td> </tr> <tr> <td>6-11 <input type="hidden" name="super_attribute_quickshop[786][140]" value="18"> </td> <td>black <input type="hidden" name="super_attribute_quickshop[786][139]" value="9"> </td> <td> <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p> </td> <td> <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[786]" value="0"> </td> </tr> </tbody> </table>
you use sort function like
var $tbody = $('.configurable-product-table tbody'); var trs = $tbody.children().slice(1).get(); trs.sort(function (a, b) { var $atds = $(a).find('td'), $btds = $(b).find('td'); var c = $atds.eq(1).text().localecompare($btds.eq(1).text()); if (c == 0) { c = sizeformat($atds.eq(0).text()).localecompare(sizeformat($btds.eq(0).text())); } return c; }) function sizeformat(size) { return size.replace(/\d+/g, function (v) { return +v < 10 ? '0' + v : v }) } $tbody.append(trs) demo: fiddle