Jquery ile Dinamik Tablo Oluşturma

Merhaba,

Öncelikle inputlar içerisinden alacağımız verileri append() fonksiyonu ile tablomuza ekleyeceğiz.Daha sonra remove() fonksiyonu ile DOM içindeki her şeyi dinamik kaldıracağız.

append(): Belirtilmiş HTML elemanlarının sonuna belirlenmiş içeriği ekler.

remove():Belirtilmiş HTML elemanı ve çocuklarını siler.

Css alanımız,

<style>
    table{
        width: 100%;
        margin: 20px 0;
        border-collapse: collapse;
    }
    table,th,td{
        border: 1px solid #cdcdcd;
    }
    table tr:nth-child(even)
    {
        background: #CCC;
    }


    table th,table td{
        padding: 5px;
        text-align: left;
    }
    #remove-row{
        padding: 5px;
        margin: 10px;
        float: right;
    }
</style>

Html alanımız,

<form>
    <input type="text" id="name" placeholder="Adınızı Giriniz">
    <input type="text" id="email" placeholder="E-posta Adresinizi Giriniz">
    <input type="text" id="phone" placeholder="Telefon numarası giriniz">
    <input type="button" id="add-row" value="Ekle">
</form>
<table>
    <thead>
    <tr>
        <th>Ad Soyad</th>
        <th>E-posta</th>
        <th>Telefon</th>
        <th>#</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<button type="button" id="remove-row">Sil</button>

Script alanımız,

Ekle butonuna tıkladığımız da id seçicisini kullanarak input içerisindeki verilere erişiyoruz ve aldığımız verileri append() fonksiyonu ile tablomuza dinamik olarak ekliyoruz.Ekledikten sonra tekrar veri girebilmek için inputlarımızı temizliyoruz.

Tablomuzun son sütununda bulunan checkbox ile silmek istediğimiz satırı /satırları seçiyoruz.Sil butonuna tıkladığımızda each() fonksiyonu ile tüm satırları geziyoruz ve checked olanları remove() fonksiyonu ile kaldırıyoruz.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $("#add-row").click(function () {
            var name=$("#name").val();
            var email=$("#email").val();
            var phone=$("#phone").val();
            var table="<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><input type='checkbox' name='record'></td></tr>";
            $("table tbody").append(table);
            $('#name,#email,#phone').val("");
        })

       $("#remove-row").click(function(){
       $("table tbody").find('input[name="record"]').
           each(function()  { 
                   if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });
</script>