应用函数动态添加每一行与jQuery

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经动态地添加了新的行与jQuery和应用功能，但我想对每一行应用不同的方式。现在它通常适用于每一行。 HTML代码：应用函数动态添加每一行与jQuery

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

回答：

可以添加一个属性（如行-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 的全部内容， 来源链接： utcz.com/qa/258079.html

回到顶部