JQuery изменить порядок следования столбцов на основе класса

Question

тд

У меня есть 3 колонки HTML таблицы и все TDs имеют класс:

Как я могу поменять TD с классом «col1» и ТД класса «col2»?

Вот пример таблицы (пожалуйста, обратите внимание, что некоторые colspans):

<table width="650" border="0" cellspacing="3" cellpadding="0"> 
<tbody> 
    <tr> 
     <td colspan="3">header</td> 
     <td class="col2">header col2</td> 
     <td class="col3">header col3</td> 
     <td class="col1">header col1</td> 
    </tr> 
    <tr> 
     <td colspan="2">row header 1</td> 
     <td>&nbsp;</td> 
     <td class="col2">any text </td> 
     <td class="col3">any text </td> 
     <td class="col1">any text</td> 
    </tr> 
    <tr> 
     <td>row header 2</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td class="col2">any text </td> 
     <td class="col3">any text </td> 
     <td class="col1">any text</td> 
    </tr> 
</tbody> 

Все, что я хочу сделать, это поменять TD.col1 с TD.col2 и отображения таблицы.

Answer 1

Чтобы добиться того, что вам нужно вы можете выбрать все .col1 элементы, а затем использовать insertBefore(), чтобы переместить их перед братом .col2, как это:

$('.col1').each(function() { 
 
    $(this).insertBefore($(this).prev('.col2')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="650" border="0" cellspacing="3" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td colspan="3">header</td> 
 
     <td class="col2">header col2</td> 
 
     <td class="col1">header col1</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2">row header 1</td> 
 
     <td>&nbsp;</td> 
 
     <td class="col2">any text col2</td> 
 
     <td class="col1">any text col1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>row header 2</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td class="col2">any text col2</td> 
 
     <td class="col1">any text col1</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

Вы можете создать массив классов и Сортировка массива в соответствии с вашими потребностями, используя javascript.