JavaScript HTML Tablo Oluşturma

Bu javascript örneğinde DOM nesneleri kullanarak dinamik olarak Tablo oluşturma yapılmıştır.

Uygulama kodlarında geçen bir kaç tane javascript fonksiyonunun kullanımını açıklamam gerekiyor.

document.getElementById: HTML belgesindeki nesnelerin javascript tarafında temsil edilmeleri için kullanılmaktadır. Dökümanda temsil edilecek nesnenin ID değeri ile nesneyi çağırır.

document.createElement: HTML nesnesi oluşturmak için kullanılır. Bellek üzerinde dinamik olarak HTML nesnesi oluşturmak için kullanılır.

node.appendChild: node düğümüne parametre olarak gönderilen nesneyi ekler. HTML nesnelerinin içine başka nesneleri eklemek için kullanılır. Örnekte <table> içine <tr> ve <tr> içine de <td> nesnelerini eklemek için kullanılmıştır.

Uygulamanın çalışan hali aşağıdaki gibi olacaktır.

JavaScript HTML Tablo Oluşturma

İlk olarak HTML nesneleri ile belgemizi oluşturuyoruz. HTML nesnelerini oluştururken dikkat edilmesi gereken nokta nesnelerin id değerleridir. Aşağıdaki gibi 2 tane text ve bir tane button nesnesi ile ekranda gösterilmek üzere bir tane div nesnsi oluşturulmuştur.


<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>www.tasarimkodlama.com</title>
        <style>
            label{
                display: block;
            }
            table,td{
                border:1px solid red;
            }
        
        </style>
    </head>
    <body>
        <label>Satır Sayısı</label>
        <input type="text" id="satir">
        <label>Sütun Sayısı</label>
        <input type="text" id="sutun">
        <label><button id="olustur">Oluştur</button></label>
        <div id="goster"></div>
        <script>

        <script>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>www.tasarimkodlama.com</title>

<style>

label{

display: block;

}

table,td{

border:1px solid red;

}

</style>

</head>

<body>

<label>Satır Sayısı</label>

<label>Sütun Sayısı</label>

<label><button id="olustur">Oluştur</button></label>

</body>

</html>

Sonraki adımda #olustur butonuna bastığımızda kodların çalışması için gerekli onclik olayını bir fonksiyona aşağıdaki gibi bağlıyoruz.


        <script>
            
           var olustur= document.getElementById("olustur");
            olustur.onclick=function(){
              
              //tüm işlemler bu aralıkta yapılacak
            }
        </script>

var olustur= document.getElementById("olustur");

olustur.onclick=function(){

//tüm işlemler bu aralıkta yapılacak

}

</script>

Text nesnelerinde değerleri okumak için text nesnelerinin id değerleri ile içindeki sayıları alıp, bir tane sayaç oluşturuyoruz.


        <script>           
           var olustur= document.getElementById("olustur");
            olustur.onclick=function(){
                var sayac=1;
                var satir=document.getElementById("satir").value;
                var sutun=document.getElementById("sutun").value;
            }
        </script>

var olustur= document.getElementById("olustur");

olustur.onclick=function(){

var sayac=1;

var satir=document.getElementById("satir").value;

var sutun=document.getElementById("sutun").value;

}

</script>

Bu aşamadan sonraki kodların tamamı satır ve sütunları oluşturmak için yazılmış iç içe for döngülerini göstermektedir.

Ayrıca table nesnesini oluşturup ilk for döngüsünde table nesnesine tr etiketlerini oluşturup ekliyoruz. İkinci for döngüsünde ise td etiketlerini oluşturup bunları da tr etiketlerine ekliyoruz.


        <script>           
           var olustur= document.getElementById("olustur");
            olustur.onclick=function(){
                var sayac=1;
                var satir=document.getElementById("satir").value;
                var sutun=document.getElementById("sutun").value;
                
                 var table=document.createElement("table");
                 for(var i=0;i<satir;i++){
                     var tr=document.createElement("tr");
                     table.appendChild(tr);
                     for(var j=0;j<sutun;j++){
                         var td=document.createElement("td");
                         td.innerHTML=sayac++;
                         tr.appendChild(td);
                     }  
                 }
                document.getElementById("goster").innerHTML="";
                document.getElementById("goster")
                    .appendChild(table);
            }
        </script>

var olustur= document.getElementById("olustur");

olustur.onclick=function(){

var sayac=1;

var satir=document.getElementById("satir").value;

var sutun=document.getElementById("sutun").value;

var table=document.createElement("table");

for(var i=0;i<satir;i++){

var tr=document.createElement("tr");

table.appendChild(tr);

for(var j=0;j<sutun;j++){

var td=document.createElement("td");

td.innerHTML=sayac++;

tr.appendChild(td);

}

document.getElementById("goster").innerHTML="";

document.getElementById("goster")

.appendChild(table);

}

</script>

Uygulama kodlarının son hali aşağıdaki gibi olacaktır.


<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>www.tasarimkodlama.com</title>
        <style>
            label{
                display: block;
            }
            table,td{
                border:1px solid red;
            }
        
        </style>
    </head>
    <body>
        <label>Satır Sayısı</label>
        <input type="text" id="satir">
        <label>Sütun Sayısı</label>
        <input type="text" id="sutun">
        <label><button id="olustur">Oluştur</button></label>
        <div id="goster"></div>
        
        <script>           
           var olustur= document.getElementById("olustur");
            olustur.onclick=function(){
                var sayac=1;
                var satir=document.getElementById("satir").value;
                var sutun=document.getElementById("sutun").value;
                
                 var table=document.createElement("table");
                 for(var i=0;i<satir;i++){
                     var tr=document.createElement("tr");
                     table.appendChild(tr);
                     for(var j=0;j<sutun;j++){
                         var td=document.createElement("td");
                         td.innerHTML=sayac++;
                         tr.appendChild(td);
                     }  
                 }
                document.getElementById("goster").innerHTML="";
                document.getElementById("goster")
                    .appendChild(table);
            }
        </script>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>www.tasarimkodlama.com</title>

<style>

label{

display: block;

}

table,td{

border:1px solid red;

}

</style>

</head>

<body>

<label>Satır Sayısı</label>

<label>Sütun Sayısı</label>

<label><button id="olustur">Oluştur</button></label>

var olustur= document.getElementById("olustur");

olustur.onclick=function(){

var sayac=1;

var satir=document.getElementById("satir").value;

var sutun=document.getElementById("sutun").value;

var table=document.createElement("table");

for(var i=0;i<satir;i++){

var tr=document.createElement("tr");

table.appendChild(tr);

for(var j=0;j<sutun;j++){

var td=document.createElement("td");

td.innerHTML=sayac++;

tr.appendChild(td);

}

document.getElementById("goster").innerHTML="";

document.getElementById("goster")

.appendChild(table);

}

</script>

</body>

</html>

JavaScript HTML Tablo Oluşturma

JavaScript HTML Tablo Oluşturma

1 Yorum

İptal Et

JavaScript HTML Tablo Oluşturma

Bunları da beğenebilirsiniz

1 Yorum