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

Answer 2

您可以使用 prepend 将所需的行推送到表的头部。

table.prepend($(selector)); 

一个简单的实现类似于这个：

$(function(){
    var table = $('#table');
    $('#swapper').keyup(function(event) {
        var value = $(this).val();
        var selector = '#' + $.trim(value).replace(/\s+/, ',#');
        if(selector) {
           table.prepend($(selector));
        }
    });
})