Ne kadar dinamik dillerle, artislik division larla uğraşsak da, uzun süreli bir html+arayüz insanı olduysanız DOM sizi sıklıkla tablolarla uğraşmak zorunda bırakmış olabilir. Bu sebeple artık pek aktif kullanımda gibi gözükmeseler de, onlarla neler yapabileceğinizi bilmek işinize yarayacaktır. Zira bir satırın tabloya nasıl ekleneceğini bilmek, herhangi başka bir yere öğe eklemek ile ilgili de düşünme şeklinizi etkileyip, geliştirebilecektir diye düşünüyorum. O sebeple mesela şöyle bir satırınız var:
<tr><td>kemal</td><td>ceren</td></tr>
Bunu tablonuzda satırların en sonuna eklemek istiyorsunuz diyelim ki o tablo da şu olsun:
<table id="ortaokul">
<tbody>
<tr><td>osman</td><td>ilayda</td></tr>
<tr><td>emre</td><td>burcu</td></tr>
</tbody>
</table>
DOM da her zaman tbody bulunur bu sebeple siz onu yazmasanız bile html dökümünde orada olacaktır, bu sebeple ben de koydum. Yukarıdaki ortaokul id li tabloya ekleme yapmak istiyorsak şu satırlardan birini kullanarak bunu gerçekleştirebiliriz. Performans itibariyle ilkten sona doğru artar diye bir ibare koyabilirim ancak kendi kodunuza göre istediğinizi seçebilirsiniz. Farklarını ise kullandıkça anlayacaksınızdır diye düşünüyorum:
$('#ortaokul tr:last').after('<tr><td>kemal</td><td>ceren</td></tr>');
$("#ortaokul > tbody").append("<tr><td>kemal</td><td>ceren</td></tr>");
$('#ortaokul > tbody:last-child').append('<tr><td>kemal</td><td>ceren</td></tr>');
$('#ortaokul ').find('tbody:last').append('<tr><td>kemal</td><td>ceren</td></tr>');
Örneklerin nasıl son satırın ardından geldiğini ya da tbody nin içini hedef aldığına dikkat ederseniz, bu örneklerin ancak tabloda herhangi bir satır olduğunda çalışır olduklarını fark edersiniz. Duruma ya da kendi yapınıza göre başka çözümler de üretmeniz de tabii ki mümkün. Mesela satırı bulup içini jquery ile tek tek de doldurabilirsiniz. Mesela bir satırın için yukarıdaki gibi kemal ve ceren i içeren iki kolon değil de kemal ve bir resim eklemek isterseniz şu şekilde yapabilirsiniz. Parantezleri bilerek böyle yaptım çünkü bu yöntemi kullanırken çok dikkatli olmalısınız, jquerynin yapısı itibariyle işler bir anda çok karışabilir:
$("#ortaokul").find('tbody').append(
$('<tr>').append(
$('<td>').append("kemal")
)
).append(
$('<tr>').append(
$('<td>').append(
$('<img>').attr('src', 'img.png').text('Image cell')
)
)
);
Temel olarak tbody e 2 tr eklemesi yapıyorum ilkinde sadece "kemal" i içeren bir kolon var, diğerinde html özellikleri belirtilmiş bir görsel bulunuyor.