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

});

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

1 个答案: