用Jquery交換表的行

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

我有一張如圖所示的表。我試圖做的是，用用戶輸入切換這些表的行。用Jquery交換表的行

例如：當用戶輸入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並沒有讓我這樣做:)。我能做些什麼來解決這個問題？

來源

2011-12-04 LuckySlevin

哪裏IDS都來自輸入？ – czarchaic

要交換的兩個元件，下面的邏輯可用於：

插入一個臨時佔位符的第二個元素之後的第一個元件
之後的第二元件
移動與所述第一替換佔位符元件。

實現如下：

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

來源

2011-12-04 17:25:37

佔位符爲我做了詭計。非常感謝您的幫助。 – LuckySlevin

您可以使用prepend到想要的行推到表頭。

table.prepend($(selector));

見的例子here

來源

2011-12-04 17:59:27

很好的例子！ +1 –

用Jquery交換表的行

回答

相關問題