jQuery 根据 td 类更改列顺序

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 6 年前。

Improve this question

我有一个 3 列的 HTML 表格，所有 TD 都有一个类:

如何交换 TD 类“col1”和 TD 类“col2”？

这是一个示例表(请注意有一些列跨度):

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