CODEWITHSUNDEEP
javascripthtml
Faroh Nur Alfani
Faroh Nur Alfani

Reputation: 11

clone row and its event javascript

I'm new in javascript. I want to clone a row, but I fails copying the function in onChange event I have inside the column.

Code snippet

<table name="tagihan" class="table table-striped">
    <thead>
    <tr>
    <th><b>Nomor Tagihan</b></th>
    <th><b>Tanggal</b></th>
    <th><b>Unit</b></th>
    <th><b>Jenis Layanan</b></th>
    <th><b>Keterangan</b></th>
    <th colspan="2"><b>Total (Rp)</b></th>
    <th><b>Tambah</b></th>
    </tr>
    </thead>

    <tbody id="tagihan">
        <tr id="detail_tagihan">
        <td></td>
        <td><?php if (isset($tgl_masuk)){ echo $tgl_masuk;} else { echo "Data tidak ditemukan"; } ?></td>
        <td>
        <select id="unit" class="selectpicker show-tick form-control" data-live-search="true" onchange="filterUnit();" >
          <option value="Umum">Umum</option>
          <option value="Surgery">Surgery</option>
          <option value="Grooming">Grooming</option>
        </select>
        </td>
        <td>
<select id="layanan" class="selectpicker show-tick form-control" data-live-search="true" disabled>
        <option data-unit="Umum" value="Pendaftaran">Pendaftaran</option>
        <option data-unit="Umum" value="Pemeriksaan">Pemeriksaan</option>

        <option data-unit="Surgery" value="Scalling">Scalling</option>
        <option data-unit="Surgery" value="Castrasi">Castrasi</option>

        <option data-unit="Grooming" value="Mandi Kutu">Mandi Kutu</option>
        <option data-unit="Grooming" value="Mandi Jamur">Mandi Jamur</option>
</select>
    <span id="option-container" style="visibility: hidden; position:absolute;"></span>
    <script>
        function filterUnit(){
            var unit = $("#unit").find('option:selected').text(); 
            $("#option-container").children().appendTo("#layanan");
            var toMove = $("#layanan").children("[data-unit!='"+unit+"']");
            toMove.appendTo("#option-container"); 
            $("#layanan").removeAttr("disabled"); 
            };
    </script>
    </td>

    <td>
    <input type="text" id="Keterangan" class="form-control" placeholder="Keterangan">
    </td>

    <td>
    <input type="text" id="Harga" class="form-control" placeholder="Harga">
    </td>
    <td>
    <button type="button" class="btn btn-default" onclick="addRow()" id="tambah">Tambah</button>
    <script>                        
        function addRow(){
            var row = document.getElementById('detail_tagihan');         
            var tr = row.cloneNode(row); 
            document.getElementById('tagihan').appendChild(tr); 
                                    } 
    </script>
    </td>
    </tr>
    </tbody>
    </table>

In my case, the new added row, the filterUnit() function doesnt work. How to make the addRow() function also clone that event?

Thank you.

Upvotes: 1

Views: 165

Answers (1)

flik
flik

Reputation: 3633

You can use jquery live function.

Here is example:

$( "select#unit" ).live( "change", function() {
  //put your filterUnit function code here // jQuery 1.3+
});
$( document ).delegate( ""select#unit"", "change", function() {
  //put your filterUnit function code here // jQuery 1.4.3+
});
$( document ).on( "change", ""select#unit"", function() {
  //put your filterUnit function code here // jQuery 1.7+
});

Here is a complete file:

<!DOCTYPE html>
<html>
<head>
    <!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){

     var cloned = $("#tagihan").html();

    $( document ).on( "click", ".tambah", function() {
         console.log(cloned);
        // $('#aaa').append(cloned);
     $("#tagihan").append(cloned);
    // console.log(111);
     //put your filterUnit function code here // jQuery 1.3+
   });
    var unit ;
    var toMove 
   $( document ).on( "change", ".unit", function(e) {

           //unit = $(this).closest('tr.detail_tagihan').("#unit").text(); 
           unit =  $(this).closest("tr").find(".unit").val();

             $(this).closest("tr").find(".option-container").children().appendTo(".layanan");

             toMove =  $(this).closest("tr").find(".layanan").children("[data-unit!='"+unit+"']");
             toMove.appendTo(".option-container"); 
            $(this).closest("tr").find(".layanan").removeAttr("disabled"); 

   });

});
</script>
</head>
<body>
<div id="aaa" > </div>
<table name="tagihan" class="table table-striped">
    <thead>
    <tr>
    <th><b>Nomor Tagihan</b></th>
    <th><b>Tanggal</b></th>
    <th><b>Unit</b></th>
    <th><b>Jenis Layanan</b></th>
    <th><b>Keterangan</b></th>
    <th colspan="2"><b>Total (Rp)</b></th>
    <th><b>Tambah</b></th>
    </tr>
    </thead>

    <tbody id="tagihan">

        <tr id="detail_tagihan" class="detail_tagihan">
        <td> - </td>
        <td> -  </td>
        <td>
        <select id="unit" class=" unit selectpicker show-tick form-control" data-live-search="true" >
          <option value="Umum">Umum</option>
          <option value="Surgery">Surgery</option>
          <option value="Grooming">Grooming</option>
        </select>
        </td>
        <td>
<select id="layanan" class=" layanan selectpicker show-tick form-control" data-live-search="true" disabled>
        <option data-unit="Umum" value="Pendaftaran">Pendaftaran</option>
        <option data-unit="Umum" value="Pemeriksaan">Pemeriksaan</option>

        <option data-unit="Surgery" value="Scalling">Scalling</option>
        <option data-unit="Surgery" value="Castrasi">Castrasi</option>

        <option data-unit="Grooming" value="Mandi Kutu">Mandi Kutu</option>
        <option data-unit="Grooming" value="Mandi Jamur">Mandi Jamur</option>
</select>
    <span id="option-container" class = "option-container" style="visibility: hidden; position:absolute;"></span>

    </td>

    <td>
    <input type="text" id="Keterangan" class=" Keterangan form-control" placeholder="Keterangan">
    </td>

    <td>
    <input type="text" id="Harga" class="Harga form-control" placeholder="Harga">
    </td>
    <td>
    <button type="button" class="btn btn-default tambah" >Tambah</button>

    </td>
    </tr>
    </tbody>
    </table>



</body>
</html>

Upvotes: 1

Related Questions