2017-02-22 16 views
0

У меня есть таблица, подобная этому.jquery - как переместить td в другой td

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

+0

http://stackoverflow.com/questions/20780459/jquery-how-to-move-td-to-another-tr проверить с этим – KulOmkar

+1

append/prepend поможет вам. – Jai

+0

Эти 2 могут также помочь u http://stackoverflow.com/questions/27535139/move-td-element-and-reorder-with-jquery http://stackoverflow.com/questions/23865324/how-to-block -movement-of-tr-in-jquery-sortable – KulOmkar

ответ

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>

+1

wooooww ... спасибо @leon ... это отлично работает – john1717

0

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

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

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

+0

спасибо за ваш ответ :) – john1717

+0

Без проблем, счастливый взлом! : D В следующий раз, когда у вас возникла аналогичная проблема, попробуйте решить проблему на более высоком уровне. –

Смежные вопросы