javascript - 使用 jQuery 以不同方式动态添加每一行的应用函数

Question

我已经使用 jQuery 动态添加新行并应用了一个函数，但我想对每一行应用不同的函数。现在它普遍适用于每一行。 HTML代码:

<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
    <tr>  
      <th width="10%">Deposit Date</th>
      <th width="10%">Deposit Method</th>
      <th width="25%">Bank Title</th>
      <th width="25%">Account No</th>
      <th width="20%">Deposit Amount</th>
      <th width="10%">#</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bank_deposit">
      <td><p>12/10/17</p></td>
      <td>
        <select class="form-control" id="deposit_method">
          <option>Bank</option>
          <option>Vault</option>
        </select>
      </td>
      <td><input id="bank_title" name="bank_title" required="required" type="text"></td>
      <td>
        <select class="form-control" id="bank_ac_no">
          <option>151035654646001</option>
          <option>151035654646002</option>
          <option>151035654646003</option>
        </select>
      </td>
      <td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td>
      <td>
      </td>
    </tr>
  </tbody>
</table>

Jquery 代码:

var i=1;
$('#addBankRow').click(function(){  
  i++;  
  $('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text"></td><td><select class="form-control" id="bank_ac_no"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td><td><a href="" name="remove" id="'+i+'" class="btn_remove">X</a></td></tr>');
});

$(document).on('click', '.btn_remove', function(e){
  e.preventDefault();
  var button_id = $(this).attr("id");
  $('#row'+button_id+'').remove();  
}); 

$("tbody").on('change', "#deposit_method", function() {

  if ($(this).val() == 'Vault'){
    $('#bank_title, #bank_ac_no').hide();
  }
  else if ($(this).val() == 'Bank'){
    $("tr.bank_deposit").each(function (){
      $('#bank_title, #bank_ac_no').show();
    });
  }

});

当我更改存款方式时，我想隐藏/显示每行中的两个字段，但它适用于每一行。

查看代码演示: https://jsfiddle.net/wasid/33qp9ewn/3/

Answer 1

您可以为输入添加一个属性(如 row-id)以确定哪一行已被处理。我修改了 HTML 和 Javascript 代码。另外，您可以查看修改后的代码为 Fiddle Demo

HTML

<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
    <tr>  
      <th width="10%">Deposit Date</th>
      <th width="10%">Deposit Method</th>
      <th width="25%">Bank Title</th>
      <th width="25%">Account No</th>
      <th width="20%">Deposit Amount</th>
      <th width="10%">#</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bank_deposit">
      <td><p>12/10/17</p></td>
      <td>
        <select class="form-control" id="deposit_method"  row-id="0">
          <option>Bank</option>
          <option>Vault</option>
        </select>
      </td>
      <td><input id="bank_title" name="bank_title" required="required" type="text"  row-id="0"></td>
      <td>
        <select class="form-control" id="bank_ac_no"  row-id="0">
          <option>151035654646001</option>
          <option>151035654646002</option>
          <option>151035654646003</option>
        </select>
      </td>
      <td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="0"></td>
      <td>
      </td>
    </tr>
  </tbody>
</table>

Javascript;

var i=1;
$('#addBankRow').click(function(){  
  i++;  
  $('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method" row-id="'+i+'"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text" row-id="'+i+'"></td><td><select class="form-control" id="bank_ac_no" row-id="'+i+'"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="'+i+'"></td><td><a href="" name="remove" id="'+i+'" class="btn_remove">X</a></td></tr>');
});

$(document).on('click', '.btn_remove', function(e){
  e.preventDefault();
  var button_id = $(this).attr("id");
  $('#row'+button_id+'').remove();  
}); 

$("tbody").on('change', "#deposit_method", function() {
  var rowId = $(this).attr("row-id");
  if ($(this).val() == 'Vault'){
    $("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").hide();
  }
  else if ($(this).val() == 'Bank'){
    $("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").show();
  }

});