Tabloda satır HTML'lerini jQuery ile değiştirmenin en kolay yolu nedir (sürükle ve bırakma)

jQuery öğesinin en kolay yolu, <TR> (tr'in kendisi değil, tr innerhtml dahil) için tüm html'yi alması ve diğeriyle değiştirmesidir. bir? Yerine takılıyorum, ama bu internalHtml'yi değiştiriyor ve ben de tüm TR html'lerini değiştirmek istiyorum. jquery için kolay bir görev olmalı gibi görünüyor. Ben dizine göre TRs ve başvurmak için bir yol olabilir lazım olmadığını mı düşünüyorum olduğunca kolay:Tabloda satır HTML'lerini jQuery ile değiştirmenin en kolay yolu nedir (sürükle ve bırakma)

temp = table.children[4]; 
table.children[4] = table.children[7] 
table.children[7] = temp;

pseudocode var tabii

ama jQuery o kadar kolay bir şey arıyorum ...

kaynak

2010-01-16 mdz

En güzel bir reuseable özel fonksiyon içine olacaktır: olayları da dikkate alınır, böylece

one.swap(other);

clone(true) kullanılır: Eğer olarak kullanabilirsiniz Böylece

$.fn.swap = function(other) { 
    $(this).replaceWith($(other).after($(this).clone(true))); 
};

. İşte

(varsa) bir sonraki satırda ile takas satırları gösteren bir SSCCE var:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2078626 part II</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $.fn.swap = function(other) { 
       $(this).replaceWith($(other).after($(this).clone(true))); 
      }; 
      $(document).ready(function() { 
       $('button.swap').click(function() { 
        $('#table tr:eq(1)').swap($('#table tr:eq(3)')); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <table id="table"> 
      <tbody> 
       <tr><td>row1col1</td><td>row1col2</td><td>row1col3</td></tr> 
       <tr><td>row2col1</td><td>row2col2</td><td>row2col3</td></tr> 
       <tr><td>row3col1</td><td>row3col2</td><td>row3col3</td></tr> 
       <tr><td>row4col1</td><td>row4col2</td><td>row4col3</td></tr> 
       <tr><td>row5col1</td><td>row5col2</td><td>row5col3</td></tr> 
      </tbody> 
     </table> 
     <button class="swap">swap rows 2 and 4</button> 
    </body> 
</html>

Not: Burada

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2078626 part I</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $.fn.swap = function(other) { 
       $(this).replaceWith($(other).after($(this).clone(true))); 
      }; 
      $(document).ready(function() { 
       $('tr').css('cursor', 'pointer').click(function() { 
        $(this).swap($(this).next()); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <table> 
      <tbody> 
       <tr><td>row1col1</td><td>row1col2</td><td>row1col3</td></tr> 
       <tr><td>row2col1</td><td>row2col2</td><td>row2col3</td></tr> 
       <tr><td>row3col1</td><td>row3col2</td><td>row3col3</td></tr> 
       <tr><td>row4col1</td><td>row4col2</td><td>row4col3</td></tr> 
       <tr><td>row5col1</td><td>row5col2</td><td>row5col3</td></tr> 
      </tbody> 
     </table> 
    </body> 
</html>

sizin özel durumda nasıl kullanılabileceğini gösteren bir SSCCE var öğe dizininin sıfır tabanlı olması, dolayısıyla :eq()'da 1 ve 3.

kaynak

2010-01-16 20:04:56 BalusC

bu yüzden jquery'yi seviyorum. her zaman her şey için basit, 1 satır zarif bir çözüm var! Teşekkürler – mdz

Belgelere göre replaceWith (http://docs.jquery.com/Manipulation/replaceWith#content) istediğinizi yapmalıdır, belki kullandığınız seçici tr dışında bir şey hedefliyor mu?

$("tr").click(function() { 
    $(this).replaceWith("<tr><td>Something New!</td></tr>"); 
});

kaynak

2010-01-16 19:21:37

Bu yapmalıyım:

var sourceRow = $('tr').eq(7); 
var targetRow = $('tr').eq(4); 

targetRow.after(sourceRow.clone()); 
sourceRow.replaceWith(targetRow);

düz ingilizce olarak, ikinci sıranın sonraki ilk sıranın kopyasını ekler o zaman ikinci orijinal ilk satırı yerini alır.

İlk satırın kendisinin değil, ilk satırın bir klonunu eklememin nedeni, bu şekilde ilk satırın konumunu kaybetmememiz ve ikinci sırayı düzgün bir şekilde konumlandırabilmemizdir.

Doğru hatırlıyorsam, jQuery nesnesiyle replaceWith öğesinin kullanılması, öğeyi orijinal yerine çıkarır ve yeni yerine yerleştirilir, ancak bu durumda, targetRow'u da kaldırmanız gerekir. Aksi takdirde, bu çalışması gerekir.

kaynak

2010-01-16 19:24:07

Teşekkürler, harika çalışıyor! – mdz

Tabloda satır HTML'lerini jQuery ile değiştirmenin en kolay yolu nedir (sürükle ve bırakma)

cevap

İlgili konular