jquery - как переместить td в другой td

Question

У меня есть таблица, подобная этому.

<table> 
    <tr> 
     <td>A</td> 
     <td><select id="B" name="B"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
     </td> 
     <td>C</td> 
     <td>D</td> 
    </tr> 
    <tr> 
     <td>E</td> 
     <td class="sample">F: will hide/show</td> 
     <td class="sample">G: will hide/show</td> 
     <td>H</td> 
    </tr> 
    <tr> 
     <td>I</td> 
     <td class="id1">J</td> 
     <td class="id1">K</td> 
     <td>L</td> 
    </tr> 
    <tr> 
     <td>M</td> 
     <td class="id2">N</td> 
     <td class="id2">O</td> 
     <td>P</td> 
    </tr> 
</table> 

Тогда, когда я изменить значение в <td>B выберите опцию, <td>F и <td>G скрою .. Он будет двигаться вверх сильфонных <td> ...
<td>J & <td>K к <td>F & <td>G,
<td>N до <td>J & <td>K,

Напротив происходит, если <td>F и <td>G будут показаны .. другой <td> будет двигаться вниз

вот JQuery ив началось.

$('select#B').change(function(event) { 

      if (this.value == '2') { 
       $(".sample").show(); 
      } else { 
       $(".sample").hide(); 
      } 
     }); 

http://jsfiddle.net/rucsh/40/

Answer 1

$('select#B').change(function(event) { 
 

 
var clone = $('td.id1').clone(); 
 
var clone2 = $('td.id2').clone(); 
 

 
      if (this.value == '2') { 
 
       $(".sample, td.id1, td.id2").show(); 
 
       $('.clone').remove(); 
 
      } else { 
 
       $(".sample, td.id1, td.id2").hide(); 
 
       $(clone).insertAfter('.sample:last').addClass('clone'); 
 
       $(clone2).insertAfter('.id1:last').addClass('clone'); 
 
      } 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table> 
 
    <tr> 
 
     <td>A</td> 
 
     <td><select id="B" name="B"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     </select> 
 
     </td> 
 
     <td>C</td> 
 
     <td>D</td> 
 
    </tr> 
 
    <tr> 
 
     <td>E</td> 
 
     <td class="sample">F: will hide/show</td> 
 
     <td class="sample">G: will hide/show</td> 
 
     <td>H</td> 
 
    </tr> 
 
    <tr> 
 
     <td>I</td> 
 
     <td class="id1">J</td> 
 
     <td class="id1">K</td> 
 
     <td>L</td> 
 
    </tr> 
 
    <tr> 
 
     <td>M</td> 
 
     <td class="id2">N</td> 
 
     <td class="id2">O</td> 
 
     <td>P</td> 
 
    </tr> 
 
</table>

Answer 2

инструкции высокого уровня,

1. Clone целевой элемент, который вы хотите переместить
2. сохранить его переменной
3. Удалить исходный элемент
4. Вставьте клонированный элемент (на шаге 2) в нужное место.

Все вышеуказанные шаги можно легко конкурировать с помощью jQuery.