Soru Güncel sonrası yeni nasıl eklenir?


Tablo yapısını takip ediyorum.

<table>
    <tr>
        <td><a href="#"></td>
    </tr>
</table>

Tıkladığımda <a> Yeni eklemek istiyorum <tr> bitişik, yanında <tr> olan <a> tıklandı.

Yani sonuç şöyle olacak:

<table>
    <tr>
        <td><a href="#"></td>
    </tr>
    <tr>
        <td><a href="#"></td>
    </tr>
</table>

25
2017-08-30 11:23


Menşei




Cevaplar:


Örnek:

$('a').bind('click', function(){
  $('<tr><td>new td</td></tr>').insertAfter($(this).closest('tr'));
});

Bir klon oluşturmak istiyorsanız:

$('a').live('click', function(){
  var $this     = $(this),
      $parentTR = $this.closest('tr');

  $parentTR.clone().insertAfter($parentTR);
});

Örnek bağlantı: http://www.jsfiddle.net/7A6MQ/

Temel olarak, tr element (çocuk düğümlerini içerir) ve bu kopyayı o öğeden sonra ekleyin. Bu nedenle, .live yeni oluşturduğunuzdan emin olmak için bağlayıcı a öğeler de bu tıklama işleyicisini çağırır.

Ref .: .klon(), .insertAfter (), .canlı()


47
2017-08-30 11:33



jAndy - İhtiyacınız yok .live() ikinci örneğiniz için. Sadece yap .clone(true)ve ilişkili tüm verileri de klonlar. jsfiddle.net/7A6MQ/1 - user113716


Ayrıca şunları yazabilirsiniz:

$('a').bind('click', function () {
    $(this).closest('tr').after('<tr><td>new td<td></tr>');
});

Çok fazla fark yok ama daha okunaklı görünüyor.


5
2017-09-19 03:22





İşte kod. Lütfen herhangi bir sorun olup olmadığını kontrol edip bildirin.

function AddRaw(obj){
var $this     = obj;
$parentTR = $this.closest('tr');
$parentTR.clone().insertAfter($parentTR);
}

1
2017-12-09 18:38



RemoveRaw (obj) işlevi {//alert(obj.parent (). parent (). html ()); if (obj.closest ('tr') [0] .rowIndex == 0) {alert ("Bu işlenmemiş olamaz"); } else {obj.parent (). parent (). remove (); }} - Pritesh Chaudhari
$ (document) .ready (function () {$ ("# submit"). click (işlev () {// alert ("hi"); var len = $ ("# dataTable tr"). uzunluk, var veri = ""; (var i = 0; i <len; i ++) {var oneTD = $ ("# dataTable tr: eq (" + i + ")") bulmak için ("td: eq (0) select") .val (); var twoTD = $ ("# dataTable tr: eq (" + i + ")") bulmak ("td: eq (1) select"). val (); data = data + oneTD + "# "+ twoTD +" | ";} // alert (veri); $ (" # data "). val (data);});}); - Pritesh Chaudhari
<td> <input onclick = "AddRaw ($ (this));" type = "button" value = "ADD"> </ td> <td> <input onclick = 'RemoveRaw ($ (this));' type = 'button' value = 'REMOVE'> </ td> - Pritesh Chaudhari