Обмен строк таблицы с помощью Jquery - PullRequest
Новая
       24

Обмен строк таблицы с помощью Jquery

2 голосов
/ 04 декабря 2011 
<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, идентификаторы этих таблиц и «некоторые текстовые» части должны быть изменены, и таблица должна выглядеть следующим образом. 

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

Я попытался перенести значения одной строки во временную переменную и сделать простой обмен, как в ООП. Однако Jquery не позволил мне сделать это :). Что я могу сделать, чтобы это исправить?

Ответы [ 2 ]

3 голосов
/ 04 декабря 2011

Чтобы поменять местами два элемента, можно использовать следующую логику:

  1. Вставить временный заполнитель после второго элемента
  2. Переместить второй элемент после первого элемента
  3. Замените заполнитель на первый элемент.

Реализация следующая: 

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

В предыдущей демонстрации я жестко закодировал идентификаторы.Предположим, что пользователь вводит идентификаторы в поля с идентификаторами from и to.Затем реализация может быть скорректирована следующим образом: 

var $elem1 = $("#" + $("#from").val()),
    $elem2 = $("#" + $("#to").val()),
    //.. rest of code
1 голос
/ 04 декабря 2011

Вы можете использовать prepend , чтобы протолкнуть нужные строки в начало таблицы. 

table.prepend($(selector));

См. Пример здесь

...