Question

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

我想知道如果我只选择一个开始日期然后点击确定，不仅显示了第一行结束日期，还显示了第二行，第三行......等等行。 start date和end date将根据间隔天数自动显示

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

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

＆＃13;

(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);

＆＃13;

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

＆＃13;

期望的结果

 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

在jquery中，您可以执行以下操作来查找多个元素：

fileprivate var noteButtonNode : ASButtonNode = ASButtonNode() let attributedTitle : NSAttributedString = NSAttributedString( string: "Book", attributes: [ NSFontAttributeName: UIFont.init(name: Fonts.Your_font, size: 16)!, NSForegroundColorAttributeName: Colors.Your_Color ]) noteButtonNode.setAttributedTitle(attributedTitle, for: ASControlState())

有关详细信息，请参阅jquery selectors

Answer 2

我已经删除了＆＃34;确定＆＃34;按钮支持更简单的更改事件（在date_start和days上）并添加逻辑以满足您的需求！如果事情不明确，请不要提出澄清;）

＆＃13;

(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);

＆＃13;

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

＆＃13;

如何更改多个表行＆＃39;具有一个开始日期的日期

2 个答案: