2013-03-24 31 views
22

ben silme bir kullanıcı tıklama, sıranın arka plan değişecek ve satır sonra silecektir zaman bu nedenle bu jQuery işlevini kullanınjquery silmek tablo satırı

<table id="favoriteFoodTable"> 
    <th> 
     Food Name: 
    </th> 
    <th> 
     Restaurant Name: 
    </th> 
    <th> 

    </th> 
    <?php while ($row = $foods->fetch()) { 
     ?> 
     <tr> 
      <td> 
       <?php echo $row['foodName']; ?> 
      </td> 
      <td> 
       <?php echo $row['restaurantName']; ?> 
      </td> 
      <td> 
       <a class="deleteLink" href="" >delete</a> 
      </td> 
     </tr> 
    <?php } ?> 
</table> 

bir tablo var

$(document).ready(function() { 
    $("#favoriteFoodTable .deleteLink").on("click",function() { 
     var td = $(this).parent(); 
     var tr = td.parent(); 
     //change the background color to red before removing 
     tr.css("background-color","#FF3700"); 

     tr.fadeOut(400, function(){ 
      tr.remove(); 
     }); 
    }); 
}); 

sadece arkaplan değişiyor ama satır silinmiyor, neden? nasıl çözülür?

+0

seçilebilir istiyorsanız http://codepedia.info/2015/02/remove-table-row-tr güzel bir makale -in-jquery/dinamik olarak eklenen tr –

cevap

57

Satır silinir, ancak tıklatıldığında bağlantıyı takip ettiğinizde, sayfa yenilendiğinde hemen geri yüklenir.

varsayılan davranışı önlemek için geri arama sonunda return false; veya event.preventDefault(); ekleyin:

$(document).ready(function() { 
    $("#favoriteFoodTable .deleteLink").on("click",function() { 
     var tr = $(this).closest('tr'); 
     tr.css("background-color","#FF3700"); 
     tr.fadeOut(400, function(){ 
      tr.remove(); 
     }); 
     return false; 
    }); 
}); 

Demonstration

Ben daha güvenilir bir kod için closest kullanılan Not: Başka bir eleman içinde arasına gelirse, tr hala bulunacaktır.

+0

için tablo nasıl kaldırılacağı hakkında link çalışmıyor, – user2059935

+0

Ne demek istiyorsun? "Sil" e tıklayın: satır kaybolur sonra kaldırılır. –

+0

Teşekkür ederim, işe yarıyor, 4 dakika sonra – user2059935

3

Yapmayı unuttuğunuz bağlantıda karma ayarlamaktır. örnek:

<a class="deleteLink" href="" >delete</a> 

sizin

$(document).ready(function() { 
    $("#favoriteFoodTable .deleteLink").on("click",function() { 
     ... 
     return false; 
    }); 
}); 
+0

+1'den sonra cevap kabul edeceğim, teşekkürler – user2059935

2

sonunda

<a class="deleteLink" href="#" >delete</a> 

veya

return false; 

Burada başka seçenektir olmalıdır.

function DeleteRowOfProductTable(productID){ 
    $('#YourTableId tr').each(function (i, row) { 
     var $row = $(row); 
     var productLabelId = $row.find('label[name*="Product_' + productID + '"]'); 

     var $productLabelIdValue = $productLabelId.text(); 
     if (parseInt(productID) == parseInt($productLabelIdValue)) 
     { 
      $row.remove(); 
     } 
    }); 
} 
0

tabloda yalnızca 1 satır bir süre İşte

$("#data tr").click(function() { 
    var selected = $(this).hasClass("highlight"); 
    $("#data tr").removeClass("highlight"); 
    if(!selected) 
      $(this).addClass("highlight"); 
İlgili konular