用 Jquery 交换表的行答案

【问题标题】：Swapping rows of a table with Jquery用 Jquery 交换表的行
【发布时间】：2012-01-12 16:54:51
【问题描述】：

<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 并没有让我这样做:)。我该怎么做才能解决这个问题？

【问题讨论】：

ID 来自哪里的输入？

标签： jquery html-table rows swap

【解决方案1】：

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

在第二个元素之后插入一个临时占位符
将第二个元素移到第一个元素之后
用第一个元素替换占位符。

实现如下：

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

【讨论】：

【解决方案2】：

您可以使用prepend 将想要的行推送到表头。

table.prepend($(selector));

一个简单的实现看起来像this:

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

【讨论】：