基于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

要实现所需的目标，您可以选择所有.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进行类别的类别和 sort 数组。