SORU
27 Ocak 2010, ÇARŞAMBA

Ekleme satırlar dinamik olarak jQuery ile

Birden fazla isteğe bağlı girişler gerekir bir form inşa ediyorum, ben aslında bu

form example

Form girişi yeni bir satır şeklinde eklenecek bir kullanıcı presler her zaman artı düğmesini, nasıl bir WordPress kullanmak içinde olabilir mi?Ayrıca, tüm satırları otomatik olarak yeni bir satır eklemek mümkün(veya sadece son satırı, eğer daha kolay / daha hızlı ise)dolu?Bu şekilde kullanıcı artı düğmesine basın gerek yok.

Belki bu tür temel bir soru ama jQuery ile hala çok yeşil sorduğum için özür dilerim, PHP ile bunu yapabilirim ama Javascript / jQuery buraya daha uygun bir rol oynar eminim.

Şimdiden teşekkürler!

@alex:

<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$form = $('#personas');
$rows = $form.find('.person');

$('a#add').click(function() {
    $rows.find(':first').clone().insertAfter($rows.find(':last'));
    $justInserted = $rows.find(':last');
    $justInserted.hide();
    $justInserted.find('input').val(''); // it may copy values from first one
    $justInserted.slideDown(500);
});
</script>
</head>

<body>
<form id="personas" name="personas" method="post" action="">
  <table width="300" border="1" cellspacing="0" cellpadding="2">
    <tr>
      <td>Name</td>
      <td>More?</td>
    </tr>
    <tr class="person">
      <td><input type="text" name="name[]" id="name[]" /></td>
      <td><a href="#" id="add"> </a></td>
    </tr>
  </table>
</form>
</body>
</html>

CEVAP
27 Ocak 2010, ÇARŞAMBA

Bu Sana yakın olsun, Ekle düğmesi bu düşünebilirsiniz diye masanın dışına çıkarıldı...

<script type="text/javascript">
    $(document).ready(function() {
        $("#add").click(function() {
          $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
          return false;
        });
    });
</script>

HTML bu gibi görünüyor

  <a  id="add"> </a></td>
  <table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2">
  <tbody>
    <tr>
      <td>Name</td>
    </tr>
    <tr class="person">
      <td><input type="text" name="name" id="name" /></td>
    </tr>
    </tbody>
  </table>

EDİTEkle.. sonra bir textbox değeri boş

    $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
    $('#mytable tbody>tr:last #name').val('');
    return false;

EDİT2Kendimi Tutamadım, eklenen TR tüm açılan listesini sıfırlamak için bunu yapabilirsiniz

$("#mytable tbody>tr:last").each(function() {this.reset();});

Gerisini size bırakıyorum!

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
Dil Eklentisi HtmlJavascriptJavascriptJquery

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ASUS North America

    ASUS North A

    12 AĞUSTOS 2008
  • Jason Parker

    Jason Parker

    14 Aralık 2009
  • Paul Schroder

    Paul Schrode

    30 Kasım 2007

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR