Cara membuat table baru dengan array di Javascript tanpa refresh halaman

pada kali ini saya akan berbagi sedikit ilmu yang mungkin saja dapat bermanfaat bagi yang membutuhkan dalam membuat sebuah program aplikasi. source code ini biasanya digunakan dalam membuat sebuah program aplikasi kasir dimana fungsi ini tidak harus me-refresh halaman karena source code ini menyimpan data pada sebuah array.

langsung saja kita coba membuat source codenya, pertama simpan dengan index.html:

<table id="test" border="1">
    <tr>
        <td class="x">test 1</td>
        <td class="y">sample 1</td>
    </tr>
    <tr>
        <td class="x">test 2</td>
        <td class="y">sample 2</td>
    </tr>
    <tr>
        <td class="x">test 3</td>
        <td class="y">sample 3</td>
    </tr>
</table>
<input id="add" placeholder="test"/>
<input id="add2" placeholder="sample"/>
<input type="button" id="try" value="try" />

kemudian kita buat javascriptnya :

$('#try').click(function () {
    var test = $("#add").val();
    var sample = $("#add2").val();
    var flag = 0;
    $("#test").find("tr").each(function () {
        var td1 = $(this).find("td:eq(0)").text();
        var td2 = $(this).find("td:eq(1)").text();
        if ((test == td1) && (sample == td2)) {
            flag = 1;
        }
    });
    if (flag == 1) {
        alert('not allowed');
    } else {
        $('#test').append('<tr><td>' + test + '</td><td>' + sample + '</td></tr>');
    }
    $("#add").val("");
    $("#add2").val("");
}); 

sekarang coba jalankan script diatas, maka tampilannya seperti dibawah ini:

semoga bermanfaat!

jika anda membutuhkan program aplikasi, program aplikasi apa saja.. anda bisa menghubungi kami di Whatsapp/Chat: 085232749944 atau tulis dikolom komentar atau bisa melalui email afandi6594@gmail.com

terima kasih 😄