javascript - 如何使用一个开始日期更改多个表行的日期

Question

现在，当在每行中选择开始日期并单击“确定”时，将相应地显示结束日期。因此，每个表行都必须手动单击按钮来显示结束日期。

我想知道如果我只选择一个开始日期并单击“确定”，是否有可能，不仅显示第一行结束日期，还会根据间隔天数自动显示第 2、第 3...等行的开始日期和结束日期

PS:请注意，行数是动态的，来自数据库，行总数未知。

任何想法都将不胜感激。谢谢!!

(function($, window, document, undefined){

  $(".addSkip").click(function() {
    // row instance to use `find()` for the other input classes
    var $row = $(this).closest('tr');

    var date = new Date($row.find(".start_date").val()+" 0:00:00"),
        days = parseInt($row.find(".days").val(), 10);
    
    console.log(date.getDate());
    console.log(days);

    if (!isNaN(date.getTime())) {
      date.setDate(date.getDate() + days);

      $row.find(".end_date").val(date.toInputFormat());
    } else {
      alert("Invalid Date");
    }
  });

  Date.prototype.toInputFormat = function() {
    var yyyy = this.getFullYear().toString();
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
    var dd  = this.getDate().toString();
    return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
  };
})
(jQuery, this, document);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<th>
start</th>

<th>end</th>
<th>interval</th>
  <tr>
    <td><input type="date" size="15" name="date[]" class="start_date" \>
      <input type="button" size="10" value="ok" class="addSkip"></td>
    <td><input type="text" size="15" name="nextdate[]" class="end_date"  \> </td>
  <td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>

  </tr>
  
  <tr>
   <td><input type="date" size="15" name="date[]" class="start_date" \>
      <input type="button" size="10" value="ok" class="addSkip"></td>
    <td><input type="text" size="15" name="nextdate[]" class="end_date"  \> </td>
  <td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
  </tr>
   <tr>
    <td><input type="date" size="15" name="date[]" class="start_date" \>
      <input type="button" size="10" value="ok" class="addSkip" ></td>
    <td><input type="text" size="15" name="nextdate[]" class="end_date"  \> </td>
<td><input type="text" size="3" name="skip[]" class="days" value="10">
 
  </tr>
</table>

想要的结果

 start            end            interval
 13/10/17       20/10/17          7
 20/10/17       23/10/17          3
 23/10/17       30/10/17          7

...... 等等

Answer 1

我删除了“确定”按钮，以支持更简单的更改事件(在 date_start 和 days)，并添加了满足您需要的逻辑!如果有不清楚的地方，请不要犹豫询问；)

(function($, window, document, undefined){
$('input.start_date, input.days').on('change',function() {
    var $row = $(this).closest('tr'),
      $start = $row.find('.start_date'),
      $end = $row.find('.end_date'),
      $other = $row.find('.otherfield'),
      $interval = $row.find('.days'),
      date = new Date($start.val()+" 0:00:00"),
        days = parseInt($interval.val(), 10);
    
    console.log(date.getDate());
    console.log(days);

    if (!isNaN(date.getTime())) {
      date.setDate(date.getDate() + days);

      $end.val(date.toInputFormat());
      $other.val(date.toInputFormat());
      $row.next('tr')
        .find('.start_date').val(date.toInputFormat()).trigger('change');
    } else {
      console.log("Invalid Date");
    }
  });

  Date.prototype.toInputFormat = function() {
    var yyyy = this.getFullYear().toString();
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
    var dd  = this.getDate().toString();
    return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
  };
})
(jQuery, this, document);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <thead>
  <tr>
    <th>start</th>
    <th>end</th>
    <th>other</th>
    <th>interval</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="date" size="15" name="date[]" class="start_date" \>
      <td><input type="text" size="15" name="nextdate[]" class="end_date"  \> </td>
      <td><textarea class="otherfield"></textarea></td>
      <td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
    </tr>

    <tr>
      <td><input type="date" size="15" name="date[]" class="start_date" \>
      <td><input type="text" size="15" name="nextdate[]" class="end_date"  \> </td>
      <td><textarea class="otherfield"></textarea></td>
      <td><input type="text" size="3" name="skip[]" class="days" value="10"> </td>
    </tr>

     <tr>
      <td><input type="date" size="15" name="date[]" class="start_date" \>
      <td><input type="text" size="15" name="nextdate[]" class="end_date"  \> </td>
      <td><textarea class="otherfield"></textarea></td>
      <td><input type="text" size="3" name="skip[]" class="days" value="10"></td>
    </tr>
   </tbody>
</table>