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

Question

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

我想知道是否有可能，如果我只能选择一个开始日期，然后点击确定， 不仅第一行结束日期显示，而且第二，第三...等行start date和end date会自动显示因此到间隔天数

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和天），并且增加了逻辑您的需求！如果事情是不明确的，不esitate要求澄清;）

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

Answer 2

在jQuery中，你可以做这样的事情来查找多个元素：

$row.find("*[class^=".end_date"]")

欲了解更多详情，请参阅jquery selectors