Jul 2 2009

Javascript ile Add Row(Satır Ekleme)

Gönderen : Mahmut Er (10:22 PM)
1 yorum - Kategori : Javascript

Javascript ile satır eklemek web dünyasında çok sık kullanılan bir yöntemdir.Bir buton yardımı ile kullanıcıya eklemek istediği kadar bilgiyi girmesi için yeni inputlat oluşturulur.Ancak JavaScript de bilindiği üzere her JS kodu her browser da çalışmaz.Bunun için JS kodlarını en standart şekilde yazmak gerekir.Bu çok kullanılan yöntemin birçok browser tarafından desteklenen küçük bir örnek uygulamasını sizlerle paylaşmak istedim.Umarım işinize yarar...

Örnek Uygulama..

Adı

Soyadı

Yaş

Kaynak Kodu

<table id="tablo1" border="1" cellspacing="2" cellpadding="1">
    <tr style="color:white;background-color:dimgray;">
        <td width="1"><input type="button" name="ekle" value=" + " onclick="satir_ekle()"></td>
        <td width="150">Adı</td>
        <td width="150">Soyadı</td>
        <td width="40">Yaş</td>
    </tr>
</table>
<script language="javascript">
var satir_sayisi = 0;
function satir_ekle(){
satir_sayisi++;
yeni_satir = document.getElementById("tablo1").insertRow(document.getElementById("tablo1").rows.length);//yeni satırı tablo1 idli tablonun kaçıncı satırına ekliyeceğimizi belirtiyoruz.
yeni_satir.setAttribute("name","yeni_satir"+satir_sayisi);///yeni satırın name değerine yenisatir1 yenisatir2 yenisatir3 .... gibi birbirinden farklı isimlem veriyoruz
yeni_satir.setAttribute("id","yeni_satir"+satir_sayisi);///yeni satırın id değerine yenisatir1 yenisatir2 yenisatir3 .... gibi birbirinden farklı isimlem veriyoruz
yeni_sutun = yeni_satir.insertCell(0);
yeni_sutun.innerHTML ='<input type="button" value="-" name="sil" onclick="satir_sil('+satir_sayisi+')">';//silme işlemi için - ifadesini ekliyoruz ilk td ye...
yeni_sutun = yeni_satir.insertCell(1);
yeni_sutun.innerHTML ='<input type="text" name="adi_'+satir_sayisi+'" value="" style="width:150px">';// daha sonra adi_ inputunu ekliyoruz..
yeni_sutun = yeni_satir.insertCell(2);
yeni_sutun.innerHTML ='<input type="text" name="sadi_'+satir_sayisi+'" value="" style="width:150px">';// daha sonra adi_ inputunu ekliyoruz..
yeni_sutun = yeni_satir.insertCell(3);
yeni_sutun.innerHTML ='<input type="text" name="yasi_'+satir_sayisi+'" value="" style="width:40px">';// daha sonra adi_ inputunu ekliyoruz..
}
function satir_sil(satir_numarasi){
var tr = document.getElementById("yeni_satir"+satir_numarasi);
if(tr)//tanımlı ise..
tr.parentNode.removeChild(tr);//sil..
}
</script>