向表中添加行后重置计算

Question

我正在尝试将行动态添加到表中并根据身份证号码计算年龄。 身份证号码例如：88xxxxxxxxxx（33岁） // 00xxxxxxxxxx（21岁） // 01xxxxxxxxxx（20岁）等等。

这里的问题，因为我正在向表中添加行。 第一行工作正常，但对于以下行，年龄选择器的结果应用于表中的所有行。

我试图在添加新行时清除 age class 的输入，但似乎它也删除了 age 选择器的所有输入。

 var num = 0; //adds row to table $('#addBtn').on('click', function() { $('#tbody').append(`<tr id="${++num}"> <td class="row-index text-center"> <p>${num}</p> </td> <td class="row-index text-center"> <input type="text" class="form-control name"> </td> <td class="row-index text-center"> <input type="text" class="form-control noic"> </td> <td class="row-index text-center"> <input type="text" class="form-control age"> </td> <td class="text-center"> <button class="btn btn-danger remove" type="button"><span class="glyphicon glyphicon-minus"></span></button> </td> </tr>`); $(".noic").blur(function() { var currentYear = new Date().getFullYear().toString().substr(-2); // 20(21) var yearNow = new Date().getFullYear(); // 2021 var yearID = $(".noic").val().substring(0, 2); // from ID: (88)xxxxxxxxxx var age; if (yearID > currentYear) { age = (+yearNow - (+1900 + +yearID)); } else { age = (+yearNow - (+2000 + +yearID)); } $(".age").val(age); }); }); // removes row from table $('#tbody').on('click', '.remove', function() { var child = $(this).closest('tr').nextAll(); child.each(function() { var id = $(this).attr('id'); var idx = $(this).children('.row-index').children('p'); var dig = parseInt(id.substring(1)); idx.html(`${dig - 1}`); $(this).attr('id', `${dig - 1}`); }); $(this).closest('tr').remove(); num--; });

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered"> <thead> <tr> <th class="text-center">No.</th> <th class="text-center">Name</th> <th class="text-center">ID Card Number</th> <th class="text-center">Age</th> <th class="text-center"><button class="btn btn-md btn-primary" id="addBtn" type="button"> <span class="glyphicon glyphicon-plus"></span> </button></th> </tr> </thead> <tbody id="tbody"> </tbody> </table>

Answer 1

您需要使用$(this)来获取对当前模糊的.noic的引用，并将其用作访问自身及其兄弟元素的引用：

 var num = 0; //adds row to table $('#addBtn').on('click', function() { $('#tbody').append(`<tr id="${++num}"> <td class="row-index text-center"> <p>${num}</p> </td> <td class="row-index text-center"> <input type="text" class="form-control name"> </td> <td class="row-index text-center"> <input type="text" class="form-control noic"> </td> <td class="row-index text-center"> <input type="text" class="form-control age"> </td> <td class="text-center"> <button class="btn btn-danger remove" type="button"><span class="glyphicon glyphicon-minus"></span></button> </td> </tr>`); $(".noic").blur(function() { var currentYear = new Date().getFullYear().toString().substr(-2); // 20(21) var yearNow = new Date().getFullYear(); // 2021 var yearID = $(this).val().substring(0, 2); // from ID: (88)xxxxxxxxxx var age; if (yearID > currentYear) { age = (+yearNow - (+1900 + +yearID)); } else { age = (+yearNow - (+2000 + +yearID)); } $(this).closest("tr").find(".age").val(age); }); }); // removes row from table $('#tbody').on('click', '.remove', function() { var child = $(this).closest('tr').nextAll(); child.each(function() { var id = $(this).attr('id'); var idx = $(this).children('.row-index').children('p'); var dig = parseInt(id.substring(1)); idx.html(`${dig - 1}`); $(this).attr('id', `${dig - 1}`); }); $(this).closest('tr').remove(); num--; });

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered"> <thead> <tr> <th class="text-center">No.</th> <th class="text-center">Name</th> <th class="text-center">ID Card Number</th> <th class="text-center">Age</th> <th class="text-center"><button class="btn btn-md btn-primary" id="addBtn" type="button"> <span class="glyphicon glyphicon-plus"></span> </button></th> </tr> </thead> <tbody id="tbody"> </tbody> </table>