Javascript Tabloda Dinamik Satır Ekleme

2 min readJul 9, 2024

Bu makalemde javascript ve HTML kullanarak satırları dinamik olarak ekleme ve silme konusunda en basit yaklaşımı sağlayacak küçük yazısıdır.

HTML tablosuna dinamik olarak satır eklemek ve satırları kaldırmak yaygın bir görevdir, özellikle formlar ve veri giriş uygulamalarında. Bu makalede, bu görevi verimli bir şekilde gerçekleştiren bir JavaScript kod parçacığını inceleyeceğiz.

HTML kodu aşağıda verilmiştir.


<body>
    <div class="container">
        <table class="table table-bordered">
            <thead>
              <tr>
         
                <th scope="col">İsim Soyisim</th>
                <th scope="col">Telefon</th>
                <th scope="col">E Posta</th>
                <th scope="col">
                    <button  onclick="createTR('table_body')" class="btn btn-dark">ekle</button>
                </th>
              </tr>
            </thead>
            <tbody id="table_body">
              <tr>
         
                <td>
                    <input type="text" class="form-control" placeholder="Name Surname">
                </td>
                <td>     
                    <input type="text" class="form-control" placeholder="Phone">
                </td>
                <td> 
                    <input type="text" class="form-control" placeholder="Eposta">
                
                </td>
                <th scope="row"><button onclick="removeTr(this)" class="btn btn-danger">-</button> </th>
              </tr>
          
          </table>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="app.js"></script>
</body>

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

CreateTB adını verdiğim fonksiyon, yeni bir tablo satırı (TR) oluşturup tablo gövdesine eklemekten sorumludur.

function createTB(tableID){
    let tableBody = document.getElementById(tableID),
        firstTR = tableBody.firstElementChild;
    trclone = firstTR.cloneNode(true);
    tableBody.append(trclone);
}

tableID: Yeni satırın ekleneceği tablonun ID'si.
tableBody: Tablo gövdesi (tbody) elementi.
firstTR: Tablo gövdesindeki ilk tablo satırı (tr) elementi.
trclone: firstTR'nin tüm alt düğümleriyle birlikte bir klonu (cloneNode'a true parametresi verilir).

Bu fonksiyon, ilk satırı çoğaltıp tabloya ekleyerek kullanıcıların dinamik olarak daha fazla satır eklemesine olanak tanır.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

cleanFirstTR fonksiyonu, bir tablo satırındaki tüm hücrelerin içeriğini temizler, ancak son hücreyi temizlemez.

function cleanFirstTR(firstTR){
    let children = firstTR.children;
    children = Array.isArray(children) ? children : Object.values(children);
    children.forEach(x => {
        if(x !== firstTR.lastElementChild){
            x.firstElementChild = '';
        }
    });
}

Bu fonksiyon, klonlanmış bir satırdaki giriş alanlarını veya verileri temizlemek için kullanışlıdır, yeni satırların boş ve yeni veri girişine hazır olmasını sağlar.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

removeTrfonksiyon, tablo gövdesinde tek satır kalmadıkça bir tablo satırını kaldırır.

function removeTr(This){
    if(This.closest('tbody').childElementCount == 1){
        // Sadece bir satır kaldıysa hiçbir şey yapma
    }
    else{
        This.closest('tr').remove();
    }
}

This: Fonksiyonu tetikleyen element (genellikle bir düğme)

Bu fonksiyon, kullanıcıların tüm satırları silmesini engeller, tablo gövdesinde en az bir satır kalmasını sağlar.

app.js // Tümü

function createTR(tableID){

        let tableBody=document.getElementById(tableID),firstTR=tableBody.firstElementChild;
        trclone=firstTR.cloneNode(true);
        tableBody.append(trclone);
}
function cleanFirstTR(firstTR){
    let children=firstTR.children;
    children=Array.isArray(children)?children:Object.values(children); //Single İF ELSE DİYE GEÇER BU
    children.forEach(x => {
        if( x!== firstTR.lastElementChild){
            x.firstElementChild='';
        }
    });
}
function removeTr(This){
    if(This.closest('tbody').childElementCount==1){

    }
    else{
        This.closest('tr').remove();
    }
}

Javascript Tabloda Dinamik Satır Ekleme

Written by Karaoz Onr