克隆行及其事件javascript_Javascript_Html

克隆行及其事件javascript

javascript html

克隆行及其事件javascript,javascript,html,Javascript,Html,我是javascript新手。我想克隆一行，但复制列中onChange事件中的函数失败代码片段 <table name="tagihan" class="table table-striped"> <thead> <tr> <th><b>Nomor Tagihan</b></th> <th><b>Tanggal</b></th>

我是javascript新手。我想克隆一行，但复制列中onChange事件中的函数失败

代码片段

<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>


诺莫·塔吉汉
唐加尔
单位
杰尼斯·拉亚南
凯特兰根
总额（卢比）
坦巴
乌姆
外科
梳毛
潘达夫塔兰
佩梅里克萨
鳞片
卡斯特拉西
曼迪库图
曼迪·贾穆尔
函数filterUnit（）{
变量单位=$（“#单位”）.find（'option:selected'）.text（）；
$（“#选项容器”）.children（）.appendTo（“#layanan”）；
var toMove=$（“#layanan”）.children（“[data unit！=”“+unit+”]）；
toMove.appendTo（“#选项容器”）；
$（“#layanan”）.removeAttr（“禁用”）；
};
坦巴
函数addRow（）{
var row=document.getElementById（'detail_tagihan'）；
var tr=行克隆节点（行）；
document.getElementById（'tagihan'）.appendChild（tr）；
}

在我的例子中，新添加的行

filterUnit（）

函数不起作用。如何使

addRow（）

函数也克隆该事件

谢谢。

您可以使用jquery功能

下面是一个例子：

$( "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+
});

以下是完整的文件：

<!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>


$（文档）.ready（函数（）{
var cloned=$（“#tagihan”）.html（）；
$（document）.on（“click”，“.tambah”，function（））{
console.log（克隆）；
//$（'#aaa'）。追加（克隆）；
$（“#塔吉汉”）。追加（克隆）；
//控制台日志（111）；
//将filterUnit函数代码放在这里//jQuery 1.3+
});
var单位；
变压动
$（文件）.on（“更改”和“.unit”，函数（e）{
//单位=$（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”）；
});
});
诺莫·塔吉汉
唐加尔
单位
杰尼斯·拉亚南
凯特兰根
总额（卢比）
坦巴
- 
-  
乌姆
外科
梳毛
潘达夫塔兰
佩梅里克萨
鳞片
卡斯特拉西
曼迪库图
曼迪·贾穆尔
坦巴

即使我已经阅读了文档，我仍然不知道如何使用它。你能解释一下吗？取消文件注释：并检查。这是100%的工作