JQuery kullanarak düzenlemek içine bir tablo satırının belirli tds koyun (sonra güncelleme w / ajax)

1 Cevap php

JQuery biraz yeniyim, bu yüzden burada biraz yardım kullanabilirsiniz.

Bu benim bir konudur:

Ben dinamik bir tablo çıktısı bir php komut dosyası var. Her satır bir "edit" butonuna, artı diğer bazı alanlar vardır. Sadece 3 olanların bir giriş kutusuna dönüştü gerekir. Düzenleme düğmesi yalnızca içine belirli satır koymak gerekir "düzenleme modunda." Ben kadarıyla bunun sonuna bir sayı ekleyerek her satır benzersiz bir sınıf atama gibi var.

Ben düzenleme moduna tüm satırları değiştirmek için jQuery kullanmak mümkün olmuştur, ama bir satır belirli olması gerekir.

Bir örnek, satır name0, price0 ve desc0 gibi sınıflar olurdu. Bir sonraki satır (değiştirilen ihtiyaç alanları için) sınıfları name1, Price1 ve desc1 için giderdim. Nasıl bu değerleri referans ve sadece bu unsurların bir olayı işler yüzden jQuery bunları geçebilir?

1 Cevap

Bunu yapmanın iki yolu vardır:

  1. Düğmesine basıldığında dinamik unsurları oluşturmak; veya

  2. Gizleme ve zaten mevcut elemanlarını gösteren.

Çok fazla DOM işleme (özellikle belirli tarayıcılarda) gerçekten yavaş olabilir bu yüzden iyilik (2). Yani, örneğin:

<table class="editable">
<tbody>
<tr>
  <td>one</td>
  <td>
    <div class="view">two</div>
    <div class="edit"><input type="text"></div>
  </td>
  <td>
    <div class="view">three</div>
    <div class="edit"><input type="text"></div>
  </td>
  <td>
    <input type="button" class="edit" value="Edit">
    <input type="button" class="send" value="Send" disabled>
    <input type="button" class="cancel" value="Cancel" disabled>
  </td>
</tr>
</tbody>
</table>

ile:

table.editable div.edit { display: none; }

ve

$(function() {
  $(":button.edit").click(function() {
    var row = $(this).closest("tr");
    row.find("input.view").attr("disabled", true");
    row.find("div.view").each(function() {
      // seed input's value
      $(this).next("div.edit").children("input").val($(this).text());
    }).fadeOut(function() { // fade out view
      row.find("div.edit").fadeIn(function() { // fade in edit
        row.find("input.edit").removeAttr("disabled"); // enable edit controls
      });
    });
  });
  $(":button.cancel").click(function() {
    var row = $(this).closest("tr");
    row.find("input.edit").attr("disabled", true");
    row.find("div.edit").fadeOut(function() {
      row.find("div.view").fadeIn(function() {
        row.find("input.view").removeAttr("disabled");
      });
    });
  });
  $(":button.save").click(function() {
    // ...
  });
});

etiketler