jquery - 使用 Jquery 交换表的行

Question

<tr id="r1">
  <td>1</td>
  <td>Some Text1</td>
  <td>Some Text1</td>
</tr>
<tr id="r2">
  <td>1</td>
  <td>Some Text2</td>
  <td>Some Text2</td>
</tr>
<tr id="r3">
  <td>3</td>
  <td>Some Text3</td>
  <td>Some Text3</td>
</tr>
<tr id="r4">
  <td>4</td>
  <td>Some Text4</td>
  <td>Some Text4</td>
</tr>
<tr id="r5">
  <td>5</td>
  <td>Some Text5</td>
  <td>Some Text5</td>
</tr>

我有一个按如图所示组织的表格。我正在尝试做的事情是，使用用户输入切换这些表的行。

例如:当用户输入 r1 和 r3 时，这些表的 id 和“某些文本”部分应更改，表应如下所示。

<tr id="r3">
  <td>1</td>
  <td>Some Text3</td>
  <td>Some Text3</td>
</tr>
<tr id="r2">
  <td>1</td>
  <td>Some Text2</td>
  <td>Some Text2</td>
</tr>
<tr id="r1">
  <td>3</td>
  <td>Some Text1</td>
  <td>Some Text1</td>
</tr>
<tr id="r4">
  <td>4</td>
  <td>Some Text4</td>
  <td>Some Text4</td>
</tr>
<tr id="r5">
  <td>5</td>
  <td>Some Text5</td>
  <td>Some Text5</td>
</tr>

我尝试将一行的值放入临时变量并进行简单的交换，就像 OOP 中一样。然而 Jquery 不让我这样做:)。我可以做什么来解决这个问题？

Answer 1

要交换两个元素，可以使用以下逻辑:

1. 在第二个元素后面插入临时占位符
2. 将第二个元素移到第一个元素之后
3. 将占位符替换为第一个元素。

实现如下:

var $elem1 = $("#r3"),
    $elem2 = $("#r1"),
    $placeholder = $("<tr><td></td></tr>");
$elem2.after($placeholder);

$elem1.after($elem2);
$placeholder.replaceWith($elem1);

在前面的示例中，我对 ID 进行了硬编码。假设用户在 ID 为 from 和 to 的字段中输入 ID。然后，可以这样调整实现:

var $elem1 = $("#" + $("#from").val()),
    $elem2 = $("#" + $("#to").val()),
    // same as first example,from line 3