javascript - 如何对每个克隆表单使用相同的功能

Question

我有一个可以克隆到新表单的表单，并且我有一个可以在每个表单中克隆的表格。

这是我的表格

<div class="box box-body form_pengeluaran">
  <section class="content-header">
    <h3>Pengeluaran</h3>
    <button type="button" class="btn btn-success tambah_form_pengeluaran">Tambah Pengeluaran</button>
  </section>
  <br>
  <div class="col-md-12">
    <div class="form-group">
      <label>Tanggal Pengeluaran</label>
      <input type="text" name="tgl_pengeluaran" id="tgl_pengeluaran" class="form-control" required>
    </div>
    <div class="form-group">
      <label>Nama Toko</label>
      <input type="text" name="nama_toko" id="nama_toko" class="form-control" required>
    </div>
    <div class="form-group">
      <label>Metode Pembayaran</label>
      <select class="form-control" name="metode_pembayaran" id="metode_pembayaran" style="width: 100%;" required>
        <option selected disabled>-- Pilih Metode Pembayaran --</option>
        <option>Debit</option>
        <option>Kredit</option>
      </select>
    </div>
    <br>
    <div class="form-group table-responsive table_barang">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Jumlah Barang</th>
            <th>Nama Barang</th>
            <th>Harga Barang</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="text" name="jlh_barang" id="jlh_barang" class="form-control"></td>
            <td><input type="text" name="nama_barang" id="nama_barang" class="form-control"></td>
            <td><input type="text" name="jlh_harga" id="jlh_harga" class="form-control"></td>
            <td><button type="button" class="btn btn-success glyphicon glyphicon-plus tambah_barang"></button></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="form-group total_harga">
      <table class="table">
        <thead>
          <tr>
            <th>Total Harga Barang</th>
            <td><input type="text" name="jlh_semua_harga" id="jlh_semua_harga" class="form-control" readonly></td>
          </tr>
        </thead>
      </table>
    </div>
  </div>
  <div class="col-md-12">
    <hr>
  </div>
</div>

当我克隆表单时，它可以工作，但是当我克隆每个表单中的表时，它不起作用..

这是我的脚本:

$(document).ready(function() {
var clone_form_pengeluaran = $("div.form_pengeluaran").clone(true);
  $(document).on('click', '.tambah_form_pengeluaran', function(e){
    var parent = jQuery('div.form_pengeluaran').last();
    clone_form_pengeluaran.clone(true).insertAfter(parent);
    $('div.form_pengeluaran:not(:last) .tambah_form_pengeluaran')
      .removeClass('tambah_form_pengeluaran').addClass('hapus_form_pengeluaran')
      .removeClass('btn-success').addClass('btn-danger')
      .html('Hapus Pengeluaran');
  }).on('click', '.hapus_form_pengeluaran', function(e)
        {
    $(this).parents('div.form_pengeluaran:first').remove();

    e.preventDefault();
    return false;
  });

  var clone_table_barang = $('div.table_barang table tbody tr').clone(true);
  $(document).on('click', '.tambah_barang', function(e){
    var parent = jQuery('div.table_barang table tbody tr').last();
    clone_table_barang.clone(true).insertAfter(parent);
    $('div.table_barang table tbody tr:not(:last) .tambah_barang')
      .removeClass('tambah_barang').addClass('hapus_barang')
      .removeClass('btn-success').addClass('btn-danger')
      .removeClass('glyphicon-plus').addClass('glyphicon-minus');
  }).on('click', '.hapus_barang', function(e)
        {
    $(this).parents('div.table_barang table tbody tr:first').remove();

    e.preventDefault();
    return false;
  });
});

这是Fiddle

Answer 1

你可以简单地写jQuery plugin就像我在下面发布的。代码是自记录的。

html

<table id="table1">
  <tr>
     <td><input type=text value=""></td>
     <td><button data-row-action="add">add</button></td>
  </tr>
</table>

<table id="table2">
  <tr>
     <td><input type=text value=""></td>
     <td><button data-row-action="add">add</button></td>
  </tr>
</table>

JS

$.fn.myTablePlugin = function() {
    if(!$(this).is('table')) { alert('Plugin can be called only on table tag !!!'); }

    let _self = $(this); // table tag which plugin is called on

    // add listener for adding row
    _self.find('*[data-row-action="add"]').on('click', function() {
    let row = $(this).closest('tr');
    let clone = row.clone(true);

    // modify edited row and add listener for remove
    row.find('button')
     .off()
     .attr('data-row-action', 'remove')
     .text('remove')
     .on('click', function() { 
        $(this).closest('tr').remove(); 
    });

    // add new empty row
    clone.find('input').val('');
    clone.appendTo(_self);
  });
};

并在任何 table 上调用插件

$('#table1').myTablePlugin();
$('#table2').myTablePlugin();
...

JSFIDDLE