Buscar

Menambah Row di HTML secara Dinamis Menggunakan JavaScript

Di HTML kita bisa menambah dan menghapus row secara dinamis dengan bantuan Javascript.
Seperti tampilan di bawah ini.
Contoh source code nya seperti di bawah ini : 
<html>
<head>
 <script language="javascript">
  function addRow(tableID) {

   var table = document.getElementById(tableID);
   var rowCount = table.rows.length;
   var row = table.insertRow(rowCount);

   var cell1 = row.insertCell(0);
   var element1 = document.createElement("input");
   element1.type = "checkbox";
   element1.name="chkbox[]";
   cell1.appendChild(element1);

   var cell2 = row.insertCell(1);
   var element3 = document.createElement("input");
   element3.type = "text";
   element3.name = "txtbox[]";
   cell2.appendChild(element3);


   var cell3 = row.insertCell(2);
   var element2 = document.createElement("input");
   element2.type = "text";
   element2.name = "txtbox[]";
   cell3.appendChild(element2);

  }

  function deleteRow(tableID) {
   try {
   var table = document.getElementById(tableID);
   var rowCount = table.rows.length;

   for(var i=0; i<rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
     table.deleteRow(i);
     rowCount--;
     i--;
    }


   }
   }catch(e) {
    alert(e);
   }
  }

 </script>
</head>
<body>

 <input onclick="addRow('dataTable')" type="button" value="Tambah" />

 <input onclick="deleteRow('dataTable')" type="button" value="Hapus" />

 <div style="padding: 20px 0px 0px 0px;">
 <table id="dataTable" style="border-bottom: 1px solid #F00; border-left: 1px solid #F00; border-right: 1px solid #F00; border-top: 1px solid #F00; width: 350pxpx;">
<tr>
   <td><input name="chk" type="checkbox" /></td>
            <td> <input type="text" /> </td>
   <td> <input type="text" /> </td>
  </tr>
</table>
</div>
</body>
</html>
Untuk menambah row secara dinamis, kita menggunakan method insertRow(), sedangkan untuk menghapus row menggunakan method deleteRow(), sedangkan untuk membuat cell baru kita menggunakan method row.insertCell().

Semoga Bermanfaat :)

Thanks for Viral :) https://twitter.com/viralpatelnet 

3 comments:

Mukhlis Saputro

thx. It Works :)

albayana pinter

kalau datanya di rows kita ambil langsung dari tabel database bagaimana mbak ? scriptnya
thx

Kegiatan

kalau tambah row nya pake input type text sama input type button gimana mba

Posting Komentar