jQuery ile Tablo Oluşturma Örneği

Bu örneğimizde jQuery ile HTML tablo oluşturacağız. Örneğimizde sayfamızın tamamını kaplayan 10 satır ve 10 sütundan oluşan bir tablo oluşturarak içine çarpım tablosu ekleyeceğiz. Ayrıca tablo kenarlık rengi ve kenarlık kalınlığı gibi özelliklerinde jQuery kodları ile nasıl değiştirilebileceğini görebilirsiniz.

Kodlar:


<html>
<head>
    <title>www.yazilimkodlama.com</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
     <script>
  $(document).ready(function(){
    // yazilimkodlama.com
    var tablo = $("<table>", {
                    border: 3,
                    width: "100%",
                    borderColor:"red" 
                });
    var x,y;

    var satir,sutun;

    for (x=1;x<=10;x++)
    {    
        satir=$('<tr>');
        for (y=1;y<=10;y++)
        {
        sutun=$('<td>');
        sutun.append((y)+' x '+(x)+' = '+(x)*(y) );
        satir.append(sutun);
        tablo.append(satir);
        }
    }
    $('body').append(tablo);
  });
  </script>
</body>
</html>