source logo : www.freebiesupply.com

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

Beberapa waktu memiliki kasus dimana ingin input banyak menggunakan codeigniter 3 dengan inputan Nama Barang, Harga dan Qty. Langsung saja,
persiapkan library nya, bootstrap, dan jquery.

Tampilan pada browser

View
Javascript
Hasilnya

<html>
<!-- syntax Begin -->

<div class="container">
  <div class="card">
    <div class="card-header">
      Oper Value To Input Append Jquery
    </div>
    <div class="card-body">
      <div class="col">
        <input type="text" id="namaBarang" placeholder="Nama Barang">
        <input type="text" id="hargaBarang" placeholder="Harga Barang">
        <input type="text" id="qtyBarang" placeholder="Qty">
        <button type="button" class="btn btn-primary " id="tombolTambah">Tambah</button>
      </div><br>
    
      <table class="table table_append" >
        <thead>
          <td>No</td>
          <td>Nama Barang</td>
          <td>Harga Barang</td>
          <td>Qty</td>
          <td>Option</td>
        </thead>
        <tbody>
          
        </tbody>
      </table>
            <div class="row btnSave_" style="display: none;">
                <div class="col-lg-12">
                    <button type="submit" class="btn btn-primary " >SIMPAN BARANG</button>    
               </div>
            </div>      
    </div>
  </div>
</div>

<!-- syntax End -->
</html>

<!-- syntax begin -->

//parsing value ke input text
    $(document).on('ready', function() {

        var count = 0;

        $("#tombolTambah").on("click keyup change", function () {

            NoCount = count+1;
            NoUrut  = count+1;

            var html_code = "<tr id='row"+NoCount+"'>";

            html_code += "<td class='numberRow'><strong>"+ NoUrut +"</strong></td>";

            html_code += "<td> <input type='text' value='"+$("#namaBarang").val()+"'></td>";
            html_code += "<td> <input type='text' value='"+$("#hargaBarang").val()+"'></td>";
            html_code += "<td> <input type='text' value='"+$("#qtyBarang").val()+"'></td>";
            html_code += '<td><a href="javascript:void(0);" class="remCF btn btn-danger btn-circle btn-sm" deleted-hrgBrg='+NoCount+' changed-noUrut='+NoUrut+'><i class="fa fa-times"></i></a></td>';
            
            html_code += "</tr>";

            $('.table_append').append(html_code);

            recalculate();
            tombolSimpan(); // akan ditampilkan jika ada satu baris nama barang

        });



        $(".table_append").on('click', '.remCF', function() { 
          
            $(this).parent().parent().remove();
       
            tombolSimpan();
            $('.table_append tbody tr').each(function(i){ $($(this).find('td')[0]).html(i+1); }); //untuk mengembalikan urutan baris/row nomor kesemula, jadi bisa berurutan
        });


        function tombolSimpan(){

            if($('.numberRow').length > 0){

                $('.btnSave_').show();

            }
             if($('.numberRow').length == 0){
                
                    $('.btnSave_').hide();
            } 

        }

        function recalculate() { //untuk menjaga nomor agar tetap urut saat telah menghapus element
          
          var i = 1;
          
          $(".numberRow").each(function() {
          
              $(this).find("strong").text(i++);     
          
          });
        }        
    });


<!-- syntax end -->

hasilnya : :

Demikian cara parsing value pada input saat append pada jquery, jika ada kesulitan mengenai artikel ini, bisa tinggalkan komentar dibawah ini. Terima Kasih

TAG TAGS :

langsungkoding

CARA OPER NILAI SAAT APPEND PADA JQUERY

Tampilan pada browser

0 comments:

Post a Comment

Search

Blog Archive