jQuery ve JavaScript ile Etkin Bir Şekilde Tablo Satırı Ekleme

HTML tablolarına dinamik olarak satır eklemek, özellikle etkileşimli kullanıcı arayüzleri oluştururken web geliştirmede sık karşılaşılan bir gereksinimdir. Bu öğretici, projenize en uygun yaklaşımı seçmenizi sağlayan hem jQuery hem de düz JavaScript kullanarak bunu başarmak için etkili yöntemleri göstermektedir.

İçerik Tablosu

• jQuery’nin append() ve prepend() yöntemleriyle Tablo Satırları Ekleme
• Düz JavaScript ile Tablo Satırları Ekleme

jQuery’nin append() ve prepend() yöntemleriyle Tablo Satırları Ekleme

jQuery, DOM’u işlemek için özlü ve verimli bir yol sunar. append() ve prepend() yöntemleri tablo yapılarıyla sorunsuz bir şekilde entegre olur.

Örnek bir HTML tablosunu ele alalım:

<table id="myTable">
  <thead>
    <tr>
      <th>Ad</th>
      <th>Yaş</th>
    <tr>
  </thead>
  <tbody>
    <!-- Satırlar buraya eklenecektir -->
  </tbody>
</table>

jQuery kullanarak yeni bir satır eklemek için:

// Tablo gövdesini al
let $tableBody = $('#myTable tbody');

// Yeni satırı oluştur
let $newRow = $('<tr>');

// Hücreleri oluştur ve ekle
$newRow.append('<td>Yeni Ad</td>');
$newRow.append('<td>30</td>');

// Satırı tablo gövdesine ekle
$tableBody.append($newRow); 

Bu kod parçacığı tablo gövdesini seçer, yeni bir satır öğesi oluşturur, veri hücreleri ekler ve tamamlanmış satırı tabloya ekler. Başa ekleme (başına ekleme) için, basitçe $tableBody.prepend($newRow); kullanın.

Daha karmaşık senaryolar veya birden çok satır eklemek için, satır HTML dizesini doğrudan oluşturmak daha verimli olabilir:

let newRowHTML = `<tr><td>Başka Bir Ad</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);

XSS güvenlik açıklarını önlemek için kullanıcı tarafından sağlanan verileri temizlemeyi unutmayın.

Düz JavaScript ile Tablo Satırları Ekleme

Yerel JavaScript yaklaşımını anlamak, DOM manipülasyonuna daha derin bir anlayış sağlar. Daha ayrıntılı olsa da, harici bağımlılıklardan kaçınır.

let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');

nameCell.textContent = 'Bir Başka Ad Daha';
ageCell.textContent = '40';

newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);

Bu kod, standart JavaScript yöntemlerini kullanarak DOM’u doğrudan manipüle eder. Projenizin ihtiyaçlarına ve jQuery ile rahatlık seviyenize en uygun yöntemi seçin. jQuery örneklerini kullanıyorsanız jQuery kütüphanesini eklemeyi unutmayın: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>