Question

我有脚本可以根据生日自动计算年龄。但它只适用于表格的第一行。

HTML

<div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon1" style="width:92% ">Date of Birth:</span>
         <input type="date" class="form-control" aria-describedby="sizing-addon1" style="width:153.8%;" id="birthdateEdit" name="birthdateEdit" value="<?php echo $row['birthdate']; ?>" required="">
    </div>

<div class="input-group input-group-sm">
   <span class="input-group-addon" id="sizing-addon1" style="width:84% ">Age:</span>
      <input type="text" class="form-control" aria-describedby="sizing-addon1" style="width:140%;" placeholder="Enter age" id="ageEdit" name="ageEdit" value="<?php echo $row['age']; ?>" >
  </div>

自动计算年龄的脚本。

 $(document).ready(function(){
        $("#birthdateEdit").change(function(){
           var value = $("#birthdateEdit").val();
            var dob = new Date(value);
            var today = new Date();
            var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));
            if(isNaN(age)) { 
             age=0;
            }
            else{
              age=age;
            }
            $('#ageEdit').val(age);
        });
    });

Answer 1

javascript中的Snippet仅针对选择器$（“＃birthdateEdit”）编写，因此当它仅适用于一个订单项时。

当你编写一个片段以获取所有具有birthdate的id或类时（jQuery（'＃xx'）。each（function（ind，obj）{// do stuff;}）;）pass通过计算年龄逻辑并在“#EddateEdit”之前的“ageEdit”中更新相同的内容。

对于多个选择，您也可以使用以下代码段

jQuery（“div [id = elementid]”） - 包含各自id的所有div元素

$（document）.ready（function（）{ $（'div input [name = birthdateEdit]'）。each（function（）{ var value = $（this）.attr（'value'）; var dob = new Date（value）; var today = new Date（）; var age = Math.floor（（today - dob）/（365.25 * 24 * 60 * 60 * 1000））; 年龄=（isNaN（年龄））？ 0：年龄; //找到当前和下一个兄弟的父母将在你应该更新年龄的div中登陆你 }）;

<h3>Age Calculator</h3>
<div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon1" style="width:92% ">Date of Birth:</span>
    <input type="date" class="form-control" aria-describedby="sizing-addon1" style="width:153.8%;" id="birthdateEdit" name="birthdateEdit" value="1988-02-25" required="">
</div>

<div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon1" style="width:84% ">Age:</span>
    <input type="text" class="form-control" aria-describedby="sizing-addon1" style="width:140%;" placeholder="Enter age" id="ageEdit" name="ageEdit" value="">
</div>

<br>

<div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon1" style="width:92% ">Date of Birth:</span>
    <input type="date" class="form-control" aria-describedby="sizing-addon1" style="width:153.8%;" id="birthdateEdit" name="birthdateEdit" value="1988-06-25" required="">
</div>

<div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon1" style="width:84% ">Age:</span>
    <input type="text" class="form-control" aria-describedby="sizing-addon1" style="width:140%;" placeholder="Enter age" id="ageEdit" name="ageEdit" value="">
</div>

Answer 2

我只是尝试使用.each()函数更新脚本并使用类更改id。我使用简单的HTML表格，查看下面的代码片段以供参考。

＆＃13;

$(document).ready(function() {
  $(".dob").each(function() {
    var value = $(this).text();
    var dob = new Date(value);
    var today = new Date();
    var age = Math.floor((today - dob) / (365.25 * 24 * 60 * 60 * 1000));
    if (isNaN(age)) {
      age = 0;
    } else {
      age = age;
    }
    $(this).next('.age').text(age);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>DOB</th>
    <th>Age</th>
  </thead>
  <tbody>
    <tr>
      <td class="dob">10/10/1991</td>
      <td class="age"></td>
    </tr>
    <tr>
      <td class="dob">2/21/1992</td>
      <td class="age"></td>
    </tr>
    <tr>
      <td class="dob">12/27/1989</td>
      <td class="age"></td>
    </tr>
    <tr>
      <td class="dob">11/14/1981</td>
      <td class="age"></td>
    </tr>
  </tbody>
</table>

＆＃13;

只有表格中的第一条记录受到javascript的影响

2 个答案: