Tablo Biçimi

sayfasında sınır çizgileri ile ilgili öğrendiğimiz parametreleri kullanabiliriz. Örnek olması açısından bu parametrelerin bir kısmını içeren bir uygulama geliştirelim:

<>
<head>
<title>Tablo parametreleri özellikleri</title>
<script language="">

function cerceve(x,y)
{
switch(x)
{
case 1: tablo.frame=y;yazi1.innerHTML="frame: "+y; break
case 2: tablo.rules=y;yazi2.innerHTML="rules: "+y; break
tablo.x
}
}

</script>
</head>
<body>

Tablonun hücrelerine tıklayarak istediğiniz parametre değerini atayın<br><br>
<table id="tablo" border="1" bordercolor="black" cellspacing="0" cellpadding="0" width="720">
<tr>
<td onclick="cerceve(1,'above')"><b>frame=</b><em>"above"</em></td>
<td onclick="cerceve(1,'below')"><b>frame=</b><em>"below"</em></td>
<td onclick="cerceve(1,'vsides')"><b>frame=</b><em>"vsides"</em></td>
<td onclick="cerceve(1,'hsides')"><b>frame=</b><em>"hsides"</em></td>
</tr><tr>
<td onclick="cerceve(1,'rhs')"><b>frame=</b><em>"rhs"</em></td>
<td onclick="cerceve(1,'lhs')"><b>frame=</b><em>"lhs"</em></td>
<td onclick="cerceve(1,'box')"><b>frame=</b><em>"box"</em></td>
<td onclick="cerceve(1,'border')"><b>frame=</b><em>"border"</em></td>
</tr><tr>
<td onclick="cerceve(1,'void')"><b>frame=</b><em>"void"</em></td>
<td onclick="cerceve(2,'rows')"><b>rules=</b><em>"rows"</em></td>
<td onclick="cerceve(2,'cols')"><b>rules=</b><em>"cols"</em></td>
<td onclick="cerceve(2,'all')"><b>rules=</b><em>"all"</em></td>
</tr><tr>
<td onclick="cerceve(2,'groups')"><b>rules=</b><em>"groups"</em></td>
<td onclick="cerceve(2,'none')"><b>rules=</b><em>"none"</em></td>
<td> </td>
<td> </td>
</tr></table><br><br>
<a id="yazi1">frame:</a><br>
<a id="yazi2">rules:</a>
</body>

</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Bu uygulamayla frame rules parametre kombinasyonlarını oluşturabiliyoruz. CSS derslerinde bunun gibi daha birçok parametre stil özelliği görmüştük. Hepsini; DHTML dersindeki DOM başlığı altında anlatıldığı gibi, uygulayabiliyoruz.

Satır Dizisi Satır Komutları
Tablo satırlarını tabloismi.rows(satır no) dizisi ile bir mlayabiliyoruz. Örneğin beyaztablo.rows(0) komut ifadesiyle beyaztablo isimli tablonun birinci satırını belirtmiş oluyoruz. Satırların yüksekliğini height komutu ile, satırların yatay hizalama şeklini align komutu ile belirleyebiliriz. (Bunu daha önce olduğu gibi, <tr> koduna id parametresi ile isim verdikten sonra parametre atayarak da yapabiliriz.)

<>
<head>
<title>rows dizisi</title>
<script language="">

function satir()
{
var x=document.forms.form_satir.yuksek.selectedIndex
var y=document.forms.form_satir.hiza.selectedIndex
var z=document.forms.form_satir.satir_no.selectedIndex
tablo.rows[z].height=document.forms.form_satir.yuksek.options[x].text
tablo.rows[z].align=document.forms.form_satir.hiza.options[y].text
}

</script>
</head>
<body>

Aşağıdaki komutları bu komutları uygulayacağınız satır numarasını seçin düğmeye basın:<br>
< name="form_satir">
height:
<select name="yuksek">
<option>10
<option>25
<option>50
<option>75
<option>100
</select>

align:
<select name="hiza">
<option>left
<option>center
<option>right
</select>

Satır no:
<select name="satir_no">
<option>1
<option>2
<option>3
<option>4
<option>5
</select><br><br>
<input type="button" value="bas" onclick="satir()"><br>
</>
<table id="tablo" border="1" cellspacing="2" cellpadding="2" width="500">
<tr><td>satır1sütun1</td><td>satır1sütun2</td></tr>
<tr><td>satır2sütun1</td><td>satır2sütun2</td></tr>
<tr><td>satır3sütun1</td><td>satır3sütun2</td></tr>
<tr><td>satır4sütun1</td><td>satır4sütun2</td></tr>
<tr><td>satır5sütun1</td><td>satır5sütun2</td></tr>
</table><br><br>
</body>

</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Uygulamada height align komutlarını kullandık, ancak rows dizisine bgcolor, width, vb. parametreleri komut olarak atayamazsınız, sonuç vermez.

Tabloya satır eklemek tablodan satır çıkarmak için deleteRow(satır no) (satır sil) insertRow(satır no) (satır ekle) komutlarını kullanırız. beyaztablo.deleteRow(2) kodu ile beyaztablo isimli tablonun 3. satırını sileriz. beyaztablo.insertRow(2) komutu 3. satırın yukarısına satır eklemeye yarar.

<>
<head>
<title>rows dizisi</title>
<script language="">

function satir_sil()
{
var x=tablo.rows.length - 1
if (x != 0) tablo.deleteRow(x)
}
function satir_ekle()
{
var y=tablo.rows.length
tablo.insertRow(y)
}

</script>
</head>
<body>

<>
<input type="button" value="Satır Ekle" onclick="satir_ekle()">

<input type="button" value="Satır Sil" onclick="satir_sil()"><br>
</><br>
<table id="tablo" border="1" cellspacing="2" cellpadding="2" width="500">
<tr><td>satır1sütun1</td><td>satır1sütun2</td></tr>
<tr><td>satır2sütun1</td><td>satır2sütun2</td></tr>
<tr><td>satır3sütun1</td><td>satır3sütun2</td></tr>
<tr><td>satır4sütun1</td><td>satır4sütun2</td></tr>
<tr><td>satır5sütun1</td><td>satır5sütun2</td></tr>
</table><br><br>
</body>

</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Uygulamada da görüldüğü üzere insertRow() ile sadece satır ekleriz ama satırların içine hücre ekleyemeyiz.

Hücre Dizisi Hücre Komutları
Tabloda önce satırlar, sonra satırların içinde hücreler mlanır. Tablodaki satırları rows dizisi ile ifade edilebileceğini görmüştük, şimdi de satırlardaki hücreleri cells dizisi ile ifade edeceğiz. cells dizisi rows dizisindeki hücreleri ifade ediyor: tablo_adi.rows[1].cells[0] kodu ile tablodaki ikinci satırın ilk hücresini belirtmiş oluruz.

rows dizisine align height parametrelerini komut olarak atayabiliyorduk, cells dizisine komut olarak atanabilen parametreler şunlardır: align, valign, colSpan rowSpan. Aşağıdaki uygulama ile colspan parametresinin cells dizisine komut olarak atandığını göreceğiz:

<>
<head>
<title>Colspan Parametre Komutu</title>
<script language="">

function hucre()
{
var x=document.forms.form_hucre.secenek.selectedIndex
tablo.rows[0].cells[0].colSpan=document.forms.form_hucre.secenek.options[x].text
tablo.rows[0].cells[1].colSpan=document.forms.form_hucre.secenek.options[4-x].text
}

</script>
</head>
<body>

< name="form_hucre">
Hücre1 için <b>colspan</b>:
<select name="secenek">
<option>1
<option>2
<option>3
<option>4
<option>5
</select>
<input type="button" value="bas" onclick="hucre()"><br>
</>
<table id="tablo" border="1" cellspacing="2" cellpadding="2" width="500">
<tr><td colspan="3">hücre1</td><td colspan="3">hücre2</td></tr>
<tr>
<td>hücre3</td><td>hücre4</td>
<td>hücre5</td><td>hücre6</td>
<td>hücre7</td><td>hücre8</td>
</tr></table>

</body>
</>
[Sayfayı göster] [Temizle] [İlk haline getir]

kaynak: ordan burdan

Tags: , , , , , , , , , , , , , , , , , , , ,
Javascript - Table Tablo Nesnesi (scripti, nasıl, nedir?) konusu
Benzer yazılar:
    Benzer yazı yok