Keranjang Coding : product


?>

Membuat Tambah,Sisip, Hapus Baris Menggunakan Javascript & Html





Pada kesempatan kali ini, matadeveloper ingin menjelaskan bagaimana cara menambahkan baris sercara dinamis menggunakan javascript & html, sisp baris dan hapus baris yang berguna dimana kita ingin menambahkan data yang lebih dari satu, dan bisa menambahkan kapan saja yang kita mau, disini matadeveloper ingin menjelaskan cara cara membuat tambah baris, sisip baris, dan hapus baris secara dinamis menggunakan javascript & html.

Buatlah satu file html yang bernama table.html, kemudian copy kan script dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Tambah, Sisip, Hapus Menggunakan Javascript & html</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<h3>Membuat Tambah, Sisip, Hapus Baris Menggunakan Javascript & Html</h3>
<table id="satuan" class="w-full table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="text-center" width="4"> Action </th>
            <th class="text-center">Nama</th>
            <th class="text-center">Keterangan</th>
        </tr>
    </thead>
    <tbody id="tbody2">
        <tr>
            <td><input name="chk_a[]" type="checkbox" class="checkall_a" value=""/></td>
            <td>
                <div class="form-group">
                <input type="text" class="form-control" required="required" name="nama[]" placeholder="Nama satuan">
                </div>
            </td>
            <td>
                <div class="form-group">
                <input type="text" class="form-control" name="keterangan[]" placeholder="Keterangan satuan">
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
          <tr>
            <td colspan="3" align="center">
            <button type="button" class="btn btn-primary" onclick="addRow('tbody2')">Tambah Baris</button>
            <button type="button" class="btn btn-warning" onclick="InsertRow('tbody2')">Sisip Baris</button>
            <button type="button" class="btn btn-danger" onclick="deleteRow('tbody2')">Hapus Baris</button>
            </td>
          </tr>
    </tfoot>
</table>
<footer>
    <a href="https://matadeveloper.com">Author By Matadeveloper.com</a>
</footer>
<script type="text/javascript">
    
   // JavaScript Document
function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        var child = newcell.children;
        for(var i2=0; i2<child.length; i2++) {
            var test = newcell.children[i2].tagName;
            switch(test) {
                case "INPUT":
                    if(newcell.children[i2].type=='checkbox'){
                        newcell.children[i2].value = "";
                        newcell.children[i2].checked = false;
                    }else{
                        newcell.children[i2].value = "";
                    }
                break;
                case "SELECT":
                    newcell.children[i2].value = "";
                break;
                default:
                break;
            }
        }
    }
}
    
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)
                    {
                    if (rowCount <= 1)
                        {
                        alert("Tidak dapat menghapus semua baris.");
                        break;
                        }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                    }
                }
            } catch(e)
    {
    alert(e);
    }
 }
 
 function InsertRow(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)
                    {
                    var newRow = table.insertRow(i+1);
                    var colCount = table.rows[0].cells.length;
                        for (h=0; h<colCount; h++){
                            var newCell = newRow.insertCell(h);
                            newCell.innerHTML = table.rows[0].cells[h].innerHTML;
                            var child = newCell.children;
                            for(var i2=0; i2<child.length; i2++) {
                                var test = newCell.children[i2].tagName;
                                switch(test) {
                                    case "INPUT":
                                        if(newCell.children[i2].type=='checkbox'){
                                            newCell.children[i2].value = "";
                                            newCell.children[i2].checked = false;
                                        }else{
                                            newCell.children[i2].value = "";
                                        }
                                    break;
                                    case "SELECT":
                                        newCell.children[i2].value = "";
                                    break;
                                    default:
                                    break;
                                }
                            }
                        }
                    }
                    
                }
            } catch(e)
    {
    alert(e);
    }
 }
</script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Setelah dibuat kemudian save, disini saya akan menjelaskan sedikit untuk proses menambah baris, sisip dan hapus baris,

<button type="button" class="btn btn-primary" onclick="addRow('tbody2')">Tambah Baris</button>
<button type="button" class="btn btn-warning" onclick="InsertRow('tbody2')">Sisip Baris</button>
<button type="button" class="btn btn-danger" onclick="deleteRow('tbody2')">Hapus Baris</button>

pada saat diklik tambah baris maka akan memanggil function addRow pada javascript, Sisip baris maka akan memanggil function InsertRow pada javascript, kemudian untuk hapus baris maka akan memanggil function deleteRow pada javascript, untuk hasil dari aplikasi yang kita buat , seperti gambar dibawah ini

Mungkin sampai sini aja pembahasan kita mengenai cara membuat tambah baris, sisip baris, dan hapus baris menggunakan javascript dan html, semoga bermanfaat bagi teman teman sekalian, selamat mecoba dan sampai jumpa di tutorial selanjutnya, terima kasih sudah berkunjung ...

Tags : javascript html

Sekilas Tentang Penulis


Kharisma Maulana Pasaribu,ST
Software Engineer | Fullstack Developer | Founder of Matadeveloper.com



Prev Post
Tutorial Crud Codeigniter4 Single Page D
Next Post
Mengenal Macam Macam Format Text Pada Ht