Menambah/menghapus Baris/kolom pada Tabel HTML

Minggu, 17 Juli 2016 edit


Sekadar catatan dari hasil jelajah tentang cara menambahkan atau menghapus baris atau kolom pada tabel HTML. Untuk kepentingan tertentu kadang diperlukan untuk menambah atau menghapus baris atau kolom pada suatu tabel sehingga tabel yang ada bersifat dinamis, pengguna dapat menambah atau mengurangi baris/kolom sesuai kebutuhannya. Berikut ini contoh dan kode yang dapat digunakan. Jangan lupa untuk memasang jquery terkini pada template blogger agar kode berikut dapat berjalan.

Menambah baris baru dan menghapus baris yang ada sebelumnya.

Baris Asli


Menambah kolom baru dan menghapus kolom yang ada sebelumnya.

Kolom Asli




Kode HTML untuk menambah atau menghapus baris
<input id="addRow" type="button" value="Tambah Baris (+)" /> <input id="deleteRow" type="button" value="Hapus Baris (-)" />
<table border="1" id="rowTable" style="width: 100%;">
<tbody>
<tr>   <td>Baris Asli</td>    </tr>
</tbody>
</table>

Kode javascript untuk menambah atau menghapus baris
$('#addRow').click( function() {      
 var tableID = "rowTable";
 var table = document.getElementById(tableID);
 var rowCount = table.rows.length;
 var row = table.insertRow(rowCount);
 
 var element1 = "Baris Baru";
 row.innerHTML = element1; 
}); 

$('#deleteRow').click( function() {  
  var tableID = "rowTable";
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  console.log(rowCount);
  if(rowCount != 1) {   
   rowCount = rowCount - 1;
   table.deleteRow(rowCount);
  }   
}); 



Kode HTML untuk menambah atau menghapus kolom
<input id="addCol" type="button" value="Tambah Kolom (+)" /> <input id="delCol" type="button" value="Hapus Kolom (-)" />
<table border="1" id="colTable" style="width: 100%;">
<tbody>
<tr>   <td>Kolom Asli</td>    </tr>
</tbody>
</table>

Kode javascript untuk menambah atau menghapus kolom
$('#addCol').click( function() {  
 var tableID = "colTable";
 var tblBodyObj = document.getElementById(tableID).tBodies[0];
 for (var i=0; i<tblBodyObj.rows.length; i++) {
  var newCell = tblBodyObj.rows[i].insertCell(-1);
  newCell.innerHTML = "Kolom Baru"
 }
});
$('#delCol').click( function() {  
 var tableID = "colTable";
 var allRows = document.getElementById(tableID).rows;
 for (var i=0; i<allRows.length; i++) {
  if (allRows[i].cells.length > 1) {
   allRows[i].deleteCell(-1);
  }
 }
});
Bagikan di

2 komentar:

  1. terimakasih penjelasannya tentang menambah dan menghapus baris atau kolom pada tabel.. artikelnya sangat membantu... tks yaa... Kunjungi juga website kampus saya : http://www.atmaluhur.ac.id dan blog saya : https://kima.mahasiswa.atmaluhur.ac.id

    BalasHapus
  2. bagaimana cara menyimpan ke databasenya terima kasih

    BalasHapus

 
Copyright © 2015-2024 Urip dot Info | Disain Template oleh Herdiansyah Dimodivikasi Urip.Info