JQuery ile tablodan satır silmek

11. August 2011 dearly .Net Comments (0)

JQuery ile html tablodan satır silmenin en basit metodu:

  Aşağıdaki gibi bir tablonuz olduğunu varsayalım.

Ad Soyad  
Recep Güzel Remove
Ali Veli Remove


Tabloyu cshtml üzerinde yaratırken Modelden gelen bir listeyi kullanalım:
  
<table id="MusteriListe" border="1">
    <thead>
        <tr>
            <th>
                Ad
            </th>
            <th>
                SoyAd
            </th>
           
            <th>
            </th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>
                    @item.Ad
                </td>
                <td>
                    @item.Soyad
                </td>
                <td>
                    <img id="imgDelete" alt="Remove" src="/Content/images/remove.png" onclick="deleteRecord(this);" />
                </td>
            </tr>
        
    </tbody>
</table>
 
imajımızın onClick eventine  deleteRecord(this) diyerek deleteRecord fonksiyonuna img nesnesini gönderiyoruz.
 
deleteRecord Fonksiyonunu da aşağıdaki gibi yaratıyoruz:
  
function deleteRecord(x) 
{
   $(x).parent().parent().remove();   
  //delete nesnesinin(<img>) parenti TD, onun da parent i TR dir. soldaki kod ilgili satırı(TR) siler.
}
 
ve satırımızı başarıyla silmiş bulunuyoruz :)