jQuery基于td类更改列顺序

Question

我有一个3列HTML表，所有TD都有一个类：

如何将TD与类“col1”和TD类“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

要实现您的需求，您可以选择所有class LineChart(Chart): chart_type = 'line' responsive = False ... def some_view(request): render(request, 'polls/chart.html', { 'line_chart': LineChart(), }) 元素，然后使用.col1在兄弟insertBefore()之前移动它们，如下所示：

.col2

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

Answer 2

您可以根据需要使用javascript创建一个类和 Sort 数组。