jQuery ile Tablo Oluşturma Örneği

sdkbyrm · 23 Aralık 2020

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<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(

+' x '+(x)+' = '+(x)*

);
satir.append(sutun);
tablo.append(satir);
}
}
$('body').append(tablo);
});
</script>
</body>
</html>

Ekran Çıktısı:

jQuery ile Tablo Oluşturma Örneği

sdkbyrm