Menambah/menghapus Baris/kolom pada Tabel HTML

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);
  }
 }
});