應用函數動態添加每一行與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

可以添加一個屬性（如行-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(); 
    } 

});