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和“some text”部分应该改变，表格应该如下所示。

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

我试图将一行的值赋给temp变量，并像在OOP中一样进行简单的交换。但是Jquery没让我这么做:)。我该怎么做才能解决这个问题？

Answer 1

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

在第二个元素
在第一个元素
将占位符替换为第一个元素。

实施如下：

// Example, let the elements be r1 and r3
var $elem1 = $("#r3"),
    $elem2 = $("#r1"),
    $placeholder = $("<tr><td></td></tr>");
$eme2.after($placeholder);

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

在上一个演示中，我对ID进行了硬编码。假设用户在ID为from和to的字段中输入ID。然后，可以通过这种方式调整实现：

var $elem1 = $("#" + $("#from").val()),
    $elem2 = $("#" + $("#to").val()),
    //.. rest of code

Answer 2

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

table.prepend($(selector));

请参阅示例here

用Jquery交换表的行

2 个答案: